- 本文我们将使用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 |
|