最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
CSS3实现鼠标移入移出时改变样式的效果
时间：2022-06-25 13:37:16 编辑：袖梨 来源：一聚教程网
1，使用伪类实现样式切换
伪类是CSS2.1时出现的新特性，让许多原本需要JavaScript才能做出来的效果使用CSS就能实现。
比如实现下面的鼠标悬停效果，只要为:hover伪类应用一组新样式即可。当访客鼠标移动到按钮上面时，浏览器会自动为按钮应用这新样式。
| 代码如下 | 复制代码 |
|
| |
（2）背景色，文字都需要过渡效果
上面样例看到虽然背景色实现了过渡，文字颜色还是直接改变的。要实现多个样式的过渡，只需使用逗号作为分隔符，同时制定多个样式属性即可。
| 代码如下 | 复制代码 |
|
| |
（3）过渡所有样式
如果想要过渡所有的样式，并且希望所有过渡都同步完成，可以在指定属性名的地方填 all。
| 代码如下 | 复制代码 |
|
| |
3，更多的过渡效果
（1）淡入淡出
通过修改 opacity 属性改变透明度，从而实现图像的淡入淡出。
| 代码如下 | 复制代码 |
|
| |
（3）发光效果
同样利用 box-shadow 属性可以实现发光效果，只不过把阴影偏移量设为0。
| 代码如下 | 复制代码 |
|
| |
4，下面样式不值得使用过渡效果
对于内边距（padding）、外边距（margin）和字体大小（font-size）。如果应用由于浏览器要重新计算布局大小或文本提示，这样过渡会消耗更多电量，同时可能导致响应迟钝和卡壳。
如果想要移动、放大、缩小元素，那么最好使用变形技术。
相关文章
- 炉石传说血DK卡组怎么样 炉石传说血DK卡组推荐介绍 11-05
- 咒术回战幻影夜行官网在哪里 咒术回战幻影夜行官网地址介绍 11-05
- 蚂蚁庄园今天答题答案2024年10月26日 11-05
- 以闪亮之名变装物语甜趣篇怎么玩 11-05
- 闪耀暖暖永夜禁锢怎么玩 11-05
- 闪耀暖暖永夜禁锢怎么玩 闪耀暖暖永夜禁锢活动介绍 11-05