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

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

宕昌网站制作公司哪家好，找创新互联！从网页设计、网站建设、微信开发、APP开发、响应式网站建设等网站项目制作，到程序开发，运营维护。创新互联2013年开创至今到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选创新互联。

要实现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如何实现透明度变化的动画就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。

新闻名称：CSS如何实现透明度变化的动画
URL地址：https://www.cdcxhl.com/article0/gcoiio.html

成都网站建设公司_创新互联，为您提供自适应网站、用户体验、动态网站、电子商务、软件开发、网站内链

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容