首頁  >  文章  >  web前端  >  CSS 實現透明度變化的動畫 (淡入淡出效果)

CSS 實現透明度變化的動畫 (淡入淡出效果)

不言
不言原創
2018-11-09 14:27:4432217瀏覽

本文我們將使用CSS來實現透明度變化的動畫,可以得到淡入和淡出效果。

要實作CSS中透明度變更的動畫,需要使用的是transition屬性。由於transition屬性是CSS3中的新增屬性,因此有必要在一些可支援的瀏覽器上執行時加上前綴。

像是Chrom,Safari編寫為“-webkit-transition”,為FireFox編寫“-moz-transition”,為Internet Explorer編寫“-ms-transition”,為Opera編寫“-o-transition” ;如果它是最新的網頁瀏覽器(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 實現透明度變化的動畫 (淡入淡出效果)

本篇文章到這裡就全部結束了,更多相關內容大家可以關注php中文網的

CSS3視頻教程專欄! ! !

以上是CSS 實現透明度變化的動畫 (淡入淡出效果)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

相關文章

看更多