幾行代碼實現頁面的淡入特效（css3）

時間 2019-11-17

標籤代碼實現頁面淡入特效 css3 css 欄目 CSS 简体版

原文原文鏈接

已經運用到本身的網站上去了，演示就是本站能夠看到效果本站在#content實現，利用CSS3動畫屬性「@keyframes 」可實現動態特效，大部分主流瀏覽器都支持，在火狐24版、chrome29版、IE10中測試經過。IE9如下瀏覽不支持此特效。 css


	下面樣式能夠直接添加到style樣式文件中…… web

 
        @ 
        keyframes 
          
        fade 
        - 
        in 
          
        { 
           
        0 
        % 
          
        { 
        opacity 
        : 
          
        0 
        ; 
        } 
        /*初始狀態 透明度爲0*/ 
           
        40 
        % 
          
        { 
        opacity 
        : 
          
        0 
        ; 
        } 
        /*過渡狀態 透明度爲0*/ 
           
        100 
        % 
          
        { 
        opacity 
        : 
          
        1 
        ; 
        } 
        /*結束狀態 透明度爲1*/ 
           
        } 
           
        @ 
        - 
        webkit 
        - 
        keyframes 
          
        fade 
        - 
        in 
          
        { 
        /*針對webkit內核*/ 
           
        0 
        % 
          
        { 
        opacity 
        : 
          
        0 
        ; 
        } 
           
        40 
        % 
          
        { 
        opacity 
        : 
          
        0 
        ; 
        } 
           
        100 
        % 
          
        { 
        opacity 
        : 
          
        1 
        ; 
        } 
           
        } 
           
        #content {  //換爲本身主題的區域ID   
       
        animation 
        : 
          
        fade 
        - 
        in 
        ; 
        /*動畫名稱*/ 
           
        animation 
        - 
        duration 
        : 
          
        1.5s 
        ; 
        /*動畫持續時間*/ 
           
        - 
        webkit 
        - 
        animation 
        : 
        fade 
        - 
        in 
          
        1.5s 
        ; 
        /*針對webkit內核*/ 
           
        }

另外，可針對頁面某部分延長顯示時間，好比側邊欄，再加上一句：

同理，可對頁面不一樣的部分設定不一樣的淡入顯示時間，實現分段顯示。

演示效果請看本站了…… chrome


	關於@keyframes的擴展講解瀏覽器

瀏覽器支持 ide

目前瀏覽器都不支持 @keyframes 規則。測試

Firefox 支持替代的 @-moz-keyframes 規則。動畫

Opera 支持替代的 @-o-keyframes 規則。網站

Safari 和 Chrome 支持替代的 @-webkit-keyframes 規則。 spa

定義和用法 ci

經過 @keyframes 規則，您可以建立動畫。

建立動畫的原理是，將一套 CSS 樣式逐漸變化爲另外一套樣式。

在動畫過程當中，您可以屢次改變這套 CSS 樣式。

以百分比來規定改變發生的時間，或者經過關鍵詞「from」和「to」，等價於 0% 和 100%。

0% 是動畫的開始時間，100% 動畫的結束時間。

爲了得到最佳的瀏覽器支持，您應該始終定義 0% 和 100% 選擇器。

定義動畫時，簡單的動畫能夠直接使用關鍵字from和to，即從一種狀態過渡到另外一種狀態：

 
        @ 
        keyframes 
          
        testanimations 
        { 
       
 
             
        from 
        { 
        opacity 
        : 
        1 
        ; 
        } 
       
 
             
        to 
        { 
        opacity 
        : 
        0 
        ; 
        } 
       
 
        } 
       