首页 前端知识 按钮变换及通用方式(雪碧图使用)

按钮变换及通用方式(雪碧图使用)

2024-01-24 15:01:25 前端知识 前端哥 828 764 我要收藏

目录

一、流程

二、不完美方式

1、做法

2、解释

三、雪碧图方式

1、实现

2、解释

四、代码

1、不完美方式

2、雪碧图方式


一、流程

(1)正常情况下是普通按钮

(2)当鼠标移入时,则会变色

(3)当鼠标点击时,则会变黑

(4)以背景图方式设置按钮点击,达到上述效果

二、不完美方式

1、做法

(1)找到三张对应效果的图片

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

2、解释

(1)这种方式能解决问题,是常规思路

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

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

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

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

三、雪碧图方式

1、实现

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

如图,这就是一个雪碧图

2、解释

(1)这种方式是开发的主流

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

四、代码

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

1、不完美方式

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>按钮变换</title>
    <style>
      /* 
        浏览器会按需加载资源或者图片,在最开始的时候,会发送请求
        解析网页,因为a会最先展示,所以会解析a的图片
        但因为hover和active没有使用,所以不会第一时间解析和加载

        */
      a {
        width: 101px;
        height: 101px;
        display: block;
        background-image: url("../src/img_exercise/1.png");
      }
      a:hover {
        background-image: url("../src/img_exercise/2.png");
      }
      a:active {
        background-image: url("../src/img_exercise/3.png");
      }
    </style>
  </head>
  <body>
    <a href="javascript:;"></a>
  </body>
</html>

2、雪碧图方式

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>按钮变换升级版/雪碧图初应用</title>
    <style>
      a {
        background-image: url("../src/img_exercise/0.jpg");
        display: block;
        width: 101px;
        height: 101px;
        background-position: -104px -143px;
      }
      a:hover {
        background-position: -249px -143px;
      }
      a:active {
        background-position: -393px -143px;
      }
    </style>
  </head>
  <body>
    <a href="javascript:;"></a>
  </body>
</html>

转载请注明出处或者链接地址:https://www.qianduange.cn//article/192.html
评论
会员中心 联系我 留言建议 回顶部
复制成功!