纯CSS实现“精灵图”动态特效

纯CSS实现“精灵图”动态特效一、什么是精灵图?什么的是精灵图呢?首先我们来看了一下京东官网的一个例子:鼠标移入之前这个“相机”的是白色的,移入之后变为了红色:这就是一个精灵图的案例。二、素材准备javascript里面有一个经典的“开关灯”实例,其中是用到了两种颜色灯泡的图片,利用click()点击事件实现“开关灯”的动态效果。我们这里不使用JS,只用一张图片,利用CSS实现。素材只需要一张图片:只要我们改…

大家好,又见面了,我是你们的朋友全栈君。

一、什么是精灵图?

什么的是精灵图呢?首先我们来看了一下京东官网的一个例子:
在这里插入图片描述
鼠标移入之前这个“相机”的是白色的,移入之后变为了红色:
在这里插入图片描述
这就是一个精灵图的案例。

二、素材准备

javascript里面有一个经典的“开关灯”实例,其中是用到了两种颜色灯泡的图片,利用click()点击事件实现“开关灯”的动态效果。我们这里不使用JS,只用一张图片,利用CSS实现。素材只需要一张图片:
在这里插入图片描述
只要我们改变图片的位置,就可以实现“精灵图”。下面我们来利用CSS进行实现。

三、CSS实现

1、插入背景图片
在这里插入图片描述
在浏览器中的显示效果为:
在这里插入图片描述
2、进行定位
在这里插入图片描述
在浏览器中的显示效果为:
在这里插入图片描述
3、改变大小实现截取
在这里插入图片描述
在浏览器中的显示效果为:在这里插入图片描述
4、利用背景图定位“切换”图片
在这里插入图片描述
在浏览器中的显示效果为:
在这里插入图片描述
5、实现“精灵图”动态切换
在这里插入图片描述
利用获取焦点时改变样式的属性hover实现“切换”:
在这里插入图片描述
这样我们就最终实现了“精灵图”的CSS动态特效。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/135234.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 音频编辑大师 3.3 注册名称 许可证

    音频编辑大师 3.3 注册名称 许可证

    2021年12月31日
  • 物业管理系统源码java_Java小区物业管理系统 源码报告下载

    物业管理系统源码java_Java小区物业管理系统 源码报告下载小学期实习就弄了个这…留作纪念.技术上突飞猛进的三周,教会了我一些做人的道理,尤其是:团队合作时的木桶效应….整个后端不是我做的,但是我还是改了好多,要不然总不可能让废柴坐那玩手机吧…其实并没有什么卵用…Bootstrap主题不错,不过里面好多文件冗余还不敢删…上传了完整的工程文件,docs目录里是部分文档…系统功能用户登录管理:这是系统的必要部分,通过它可…

  • SQL窗体函數一例

    SQL窗体函數一例

  • 哈希表(散列表)原理详解

    哈希表(散列表)原理详解什么是哈希表?哈希表(Hashtable,也叫散列表),是根据关键码值(Keyvalue)而直接进行访问的数据结构。也就是说,它通过把关键码值映射到表中一个位置来访问记录,以加快查找的速度。这个映射函数叫做散列函数,存放记录的数组叫做散列表。记录的存储位置=f(关键字)这里的对应关系f称为散列函数,又称为哈希(Hash函数),采用散列技术将记录存储在一块连续的存储空间中,这块…

  • Sqlserver DateTime转换成SMALLDATETIME时“产生一个超出范围的值”「建议收藏」

    Sqlserver DateTime转换成SMALLDATETIME时“产生一个超出范围的值”「建议收藏」工作中遇到一个问题,A表中字段(DateTime1)的数据类型为DateTime,新建了一张表B的SMALLDATETIME1字段的数据来自A表的DateTime1但在将A表字段DateTime1导出到B表的SMALLDATETIME1字段时出现了以下错误后经过排查发现在原来是A表DateTime1字段的值有许多是"1753-01-0100:00:00.000",从而导致转换失败…

  • 数据库MySQL学习——内含34道MySQL练习题及答案

    数据库MySQL学习——内含34道MySQL练习题及答案数据库MySQL1MySQL数据库简介1.1sql、DB、DBMS分别是什么,关系?DB:DataBase数据库DBMS:DateBaseManagementSystem数据库管理系统SQL:结构化查询语言、sql语句的编译有dbms完成DBMS负责执行sql语句,通过之心sql语句来操作DB当中的数据1.2什么是表?table是数据库的基本组成单元,所有的数据都以表格的形式组织,目的是可读性强行:被称为数据/记录(data)列:被称为字段(column)学号(

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号