本文介绍如何利用CSS的transition属性实现透明度变化的动画，达到淡入淡出效果。文章详细讲解了针对不同浏览器的前缀用法，并提供了一个3秒内完成动画的示例代码，包括HTML和CSS部分，展示了点击链接后元素淡出的动画过程。
- 本文我们将使用CSS来实现透明度发生变化的动画，可以获得淡入和淡出效果。
- 要实现CSS中透明度更改的动画，需要使用的是transition属性。由于transition属性是CSS3中的新增属性，因此有必要在一些可支持的浏览器上运行时加上前缀。
- 像是Chrom，Safari编写为“-webkit-transition”，为FireFox编写“-moz-transition”，为Internet Explorer编写“-ms-transition”，为Opera编写“-o-transition”；如果它是最新的Web浏览器（Internet Explorer 11，Microsoft Edge），则直接使用“transition”属性而不需要加上前缀。
打造全网web前端全栈资料库（总目录）看完学的更快，掌握的更加牢固，你值得拥有（持续更新）
语法：
| 1 |
|
- 对于[变化时间]，指定动画更改的时间
- 例子：
- 以下示例是在3秒内动画。
| 1 |
|
代码实例如下：
创建以下HTML文件。
fade.html
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
|
最低0.47元/天 解锁文章
扫一扫
2850
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
