• 按钮变换及通用方式（雪碧图使用）

    目录

    一、流程

    二、不完美方式

    1、做法

    2、解释

    三、雪碧图方式

    1、实现

    2、解释

    四、代码

    1、不完美方式

    2、雪碧图方式

    一、流程

    （1）正常情况下是普通按钮

    （2）当鼠标移入时，则会变色

    （3）当鼠标点击时，则会变黑

    （4）以背景图方式设置按钮点击，达到上述效果

    二、不完美方式

    1、做法

    （1）找到三张对应效果的图片

    （2）分别对原元素、hover伪类、active伪类粘贴不同的图片

    2、解释

    （1）这种方式能解决问题，是常规思路

    （2）但是可能第一次加载网页可能会出现空白加载的问题

    -浏览器会按需加载资源或者图片

    -在最开始的时候，会发送请求解析网页，因为原元素会最先展示，所以会解析原元素的图片

    -但因为hover和active没有使用，所以不会第一时间解析和加载后面两个伪类的图片

    三、雪碧图方式

    1、实现

    将所有状态的图片贴在一张中，通过给不同元素或者元素不同伪类设置偏移量，从而展示图片的不同位置

    如图，这就是一个雪碧图

    2、解释

    （1）这种方式是开发的主流

    （2）且因为只需要加载一张图片，加载速度快，节省资源，有更好用户体验

    四、代码

    注意：这里的图片均来自网上，想要重现可自行查找图片，或者前面的雪碧图可以直接使用

    1、不完美方式

    1. html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.     <title>按钮变换title>
    8.     <style>
    9.       /* 
    10.         浏览器会按需加载资源或者图片，在最开始的时候，会发送请求
    11.         解析网页，因为a会最先展示，所以会解析a的图片
    12.         但因为hover和active没有使用，所以不会第一时间解析和加载
    14.         */
    15.       a {
    16.         width: 101px;
    17.         height: 101px;
    18.         display: block;
    19.         background-image: url("../src/img_exercise/1.png");
    20.       }
    21.       a:hover {
    22.         background-image: url("../src/img_exercise/2.png");
    23.       }
    24.       a:active {
    25.         background-image: url("../src/img_exercise/3.png");
    26.       }
    27.     style>
    28.   head>
    29.   <body>
    30.     <a href="javascript:;">a>
    31.   body>
    32. html>

    2、雪碧图方式

    注意：这里的代码使用的图片就是前面的三个按钮在一起的图片

    1. html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.     <title>按钮变换升级版/雪碧图初应用title>
    8.     <style>
    9.       a {
    10.         background-image: url("../src/img_exercise/0.jpg");
    11.         display: block;
    12.         width: 101px;
    13.         height: 101px;
    14.         background-position: -104px -143px;
    15.       }
    16.       a:hover {
    17.         background-position: -249px -143px;
    18.       }
    19.       a:active {
    20.         background-position: -393px -143px;
    21.       }
    22.     style>
    23.   head>
    24.   <body>
    25.     <a href="javascript:;">a>
    26.   body>
    27. html>

     

  • 相关阅读:
    【G-LAB】带你掌握网络交换机上各种接口知识
    Flink - 内存模型详解
    02_Docker
    智能矩阵，引领商业新纪元！拓世方案：打破线上线下界限，开启无限营销可能！
    计算机图形学 实验四：线段裁剪
    【博客550】k8s乐观锁机制：控制并发请求与数据一致性
    linux基础2
    【学习笔记】线程的生命周期和状态
    2023-09-23 Windows系统rust开发环境配置真经
    VUE element-ui之table表格横向展示（表尾汇总）_elementui横向表格
  • 原文地址：https://blog.csdn.net/comegoing_xin_lv/article/details/126289228