这篇文章将为大家详细讲解有关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”属性而不需要加上前缀。(相关推荐:CSS3在线手册)
语法:
transition: all [变化时间];
对于[变化时间],指定动画更改的时间
例子:
以下示例是在3秒内动画。
transition: all 3s;
代码实例如下:
创建以下HTML文件。
fade.html
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <link rel="stylesheet" href="fade.css" /> <meta charset="utf-8" /> <script type="text/javascript"> function FadeOutLinkClick() { var frame = document.getElementById("FadeOutDivFrame"); frame.className = "FadeOutFrame fadeout"; } function FadeInLinkClick() { var frame = document.getElementById("FadeInDivFrame"); frame.className = "FadeInFrame fadein"; } </script> </head> <body> <div id="FadeOutDivFrame" class="FadeOutFrame">按钮。</div> <a id="fadeout" href="javascript:void(0);" onclick="FadeOutLinkClick();">淡出</a> <hr/> <div id="FadeInDivFrame" class="FadeInFrame">框架。</div> <a id="fadeout" href="javascript:void(0);" onclick="FadeInLinkClick();">淡入</a> </body> </html>
fade.css
.FadeOutFrame { width: 320px; height: 180px; background-color: #abffe8; border: 1px solid #0067aa; opacity: 1; } .FadeOutFrame.fadeout{ -webkit-transition: all 1.5s; -moz-transition: all 1.5s; -ms-transition: all 1.5s; -o-transition: all 1.5s; transition: all 1.5s; opacity: 0; } .FadeInFrame { width: 320px; height: 180px; background-color: #ffd3d3; border: 1px solid #b50042; opacity: 0; } .FadeInFrame.fadein{ -webkit-transition: all 1.5s; -moz-transition: all 1.5s; -ms-transition: all 1.5s; -o-transition: all 1.5s; transition: all 1.5s; opacity: 1; }
说明:点击“淡出”链接时,将“FadeOutDivFrame”框的类别从“FadeOutFrame”更改为“FadeOutFrame fadeout”,“FadeOutFrame fadeout”设置了transition属性和opacity: 0;,因为transition属性和opacity: 0;已经设置了,所以就淡出为透明动画。
效果如下:
关于CSS如何实现透明度变化的动画就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
分享题目:CSS如何实现透明度变化的动画-创新互联
标题链接:https://www.cdcxhl.com/article14/dsecde.html
成都网站建设公司_创新互联,为您提供网站改版、网站导航、微信小程序、App开发、外贸网站建设、网页设计公司
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联