CSS如何实现透明度变化的动画

　　介绍

这篇文章将为大家详细讲解有关CSS如何实现透明度变化的动画,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

要实现CSS中透明度更改的动画,需要使用的是过渡属性。由于过渡属性是CSS3中的新增属性,因此有必要在一些可支持的浏览器上运行时加上前缀。

像是铬,Safari编写为“-webkit-transition”,为FireFox编写“-moz-transition”,为Internet Explorer编写“-ms-transition”,为歌剧编写“-o-transition”;如果它是最新的网页浏览器(微软Internet Explorer 11日边缘),则直接使用“过渡”属性而不需要加上前缀。(相关推荐:CSS3在线手册)

语法:

转型:所有[变化时间),

对于[变化时间),指定动画更改的时间

例子:

以下示例是在3秒内动画。

转型:所有3 s;

代码实例如下:

创建以下HTML文件。

褪色。html 

 & lt;/title>
　　& lt;链接rel=皊tylesheet"href=癴ade.css"/比;
　　& lt;元charset=皍tf-8"/比;
　　& lt;脚本类型=拔谋?javascript"比;
　　函数FadeOutLinkClick () {
　　var?. getelementbyid (“FadeOutDivFrame");
　　框架。className=癋adeOutFrame fadeout";
　　}
　　函数FadeInLinkClick () {
　　var?. getelementbyid (“FadeInDivFrame");
　　框架。className=癋adeInFrame fadein";
　　}
　　& lt;/script>
　　& lt;/head>
　　& lt; body>
　　& lt; div id=癋adeOutDivFrame"类=癋adeOutFrame"祝辞按钮灵活;/div>
　　& lt; id=癴adeout"href=癹avascript:无效(0);“>。FadeOutFrame {
　　宽度:320 px;
　　身高:180 px;
　　background - color: # abffe8;
　　边界:1 px固体# 0067 aa;
　　透明度:1;
　　}
　　.FadeOutFrame.fadeout {
　　-webkit-transition:所有1.5年代;
　　-moz-transition:所有1.5年代;
　　-ms-transition:所有1.5年代;
　　-o-transition:所有1.5年代;
　　过渡:所有1.5年代;
　　透明度:0;
　　}
　　.FadeInFrame {
　　宽度:320 px;
　　身高:180 px;
　　background - color: # ffd3d3;
　　边界:1 px固体# b50042;
　　透明度:0;
　　}
　　.FadeInFrame.fadein {
　　-webkit-transition:所有1.5年代;
　　-moz-transition:所有1.5年代;
　　-ms-transition:所有1.5年代;
　　-o-transition:所有1.5年代;
　　过渡:所有1.5年代;
　　透明度:1;
　　}

说明:点击“淡”出链接时,将“FadeOutDivFrame”框的类别从“FadeOutFrame”更改为“FadeOutFrame渐隐”、“FadeOutFrame渐隐”设置了过渡属性和不透明度:0,,因为过渡属性和不透明度:0;已经设置了,所以就淡出为透明动画。

效果如下:

CSS如何实现透明度变化的动画

关于CSS如何实现透明度变化的动画就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看的到。

CSS如何实现透明度变化的动画