纯CSS实现“精灵图”动态特效
CSS 实现 动态 特效 精灵
2023-06-13 09:11:59 时间
大家好,又见面了,我是你们的朋友全栈君。
一、什么是精灵图?
什么的是精灵图呢?首先我们来看了一下京东官网的一个例子:
鼠标移入之前这个“相机”的是白色的,移入之后变为了红色:
这就是一个精灵图的案例。
二、素材准备
javascript里面有一个经典的“开关灯”实例,其中是用到了两种颜色灯泡的图片,利用click()
点击事件实现“开关灯”的动态效果。我们这里不使用JS,只用一张图片,利用CSS实现。素材只需要一张图片:
只要我们改变图片的位置,就可以实现“精灵图”。下面我们来利用CSS进行实现。
三、CSS实现
1、插入背景图片
在浏览器中的显示效果为:
2、进行定位
在浏览器中的显示效果为:
3、改变大小实现截取
在浏览器中的显示效果为:
4、利用背景图定位“切换”图片
在浏览器中的显示效果为:
5、实现“精灵图”动态切换
利用获取焦点时改变样式的属性hover
实现“切换”:
这样我们就最终实现了“精灵图”的CSS动态特效。
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/135234.html原文链接:https://javaforall.cn
相关文章
- CSS中的小三角实现
- CSS笔记(18)
- 【说站】css设置文字居中的两种方法
- css里的clear_clear用法
- CSS实现背景颜色渐变效果
- CSS容器查询终于来了
- 使用HTML+CSS实现网页loading加载效果,支持定时或加载完成后隐藏
- 在实践中学习类型定义、类型覆盖、CSS Modules
- 不要再用js设置rem了,现代css自适应方案来了
- css定义浏览器滚动条样式-实现客服访客聊天界面滚动样式【唯一客服】
- 认识CSS
- CSS架构之BEM设计模式
- 【ES三周年】一文弄懂css权重
- CSS实现省略号
- WordPress 主题教程 #9:Style.css 和 CSS 介绍
- HTML + CSS + JS 利用邮编查询 API 实现邮编查询工具
- 使用html+css+js实现魔性的舞蹈详解编程语言
- CSS基础 – position详解编程语言
- CSS 属性设置优先级问题详解编程语言
- MySQL登陆系统CSS实现一键登录(css mysql登陆)
- XML+XSL+CSS+ASP打造留言簿
- CSS解决未知高度垂直居中
- 使用CSS框架布局的缺点和优点小结
- JQuery+CSS提示框实现思路及代码(纯手工打造)
- jquery配合css简单实现返回顶部效果
- js+css实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
- 用html+css+js实现的一个简单的图片切换特效
- asp.net通过动态加载不同CSS实现多界面