怎么使用CSS3的頁面加載動畫

今天就跟大家聊聊有關(guān)怎么使用CSS3的頁面加載動畫，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

前兩天從一個網(wǎng)站中看到了一些比較好的loading動畫效果，是用純CSS3來寫的，感覺不錯，就嘗試著照著效果來自己寫出來。

在開始之前，先復(fù)習(xí)一個小知識：CSS3新增的關(guān)鍵幀動畫，可以用來實現(xiàn)很多的動畫，我們可以通過animation-delay來控制動畫延遲執(zhí)行，來實現(xiàn)豐富的效果。

當(dāng)animation-delay的值為正值時，動畫將被延遲從初始狀態(tài)開始執(zhí)行；

當(dāng)animation-delay的值為負(fù)數(shù)時，動畫將被提前從該值（負(fù)數(shù)的絕對值）對應(yīng)的狀態(tài)開始執(zhí)行。

（效果圖片可能不太清楚，請諒解）

一、第一種效果

一共16個小正方形，將位置定位，通過關(guān)鍵幀來改變正方形的透明度

{animation: ball 2s 0s ease infinite;}
@keyframes ball {
      0%{
        opacity: 1;
      }
      50%{
        opacity: 1;
      }
      51%{
        opacity: 0;
      }
    }

對每一個正方形設(shè)置animation-delay值，在這里我的整體動畫耗時是2s，均分16個正方形是0.125s，于是我設(shè)置的animation-delay值是從-1.875s開始以0.125的數(shù)差開始增加一直到0。

二、第二種效果

中間一個大球的位置不變，旁邊三個小球分別包含在三個正方形中，將小球設(shè)置定位{top:0;left:0;}，通過設(shè)置正方形rotateZ旋轉(zhuǎn)便可以形成這種交叉。

通過關(guān)鍵幀動畫來設(shè)置動畫過程（下面關(guān)鍵幀動畫的書寫并不是最好的方法），并給每個小球設(shè)置animation-delay的值，可以讓三個小球在不同的時刻從正面通過。

{animation: turn_atom 1.5s 0s ease infinite;}
@keyframes turn_atom {
      0%{
        height:25px;
        width: 25px;
        top: 0;
        left: 0;
      }
      50%{
        height: 20px;
        width: 20px;
        top: 60px;
        left: 60px;
      }
      51%{
        height: 15px;
        width: 15px;
        top: 60px;
        left: 60px;
      }
      100%{
        height: 20px;
        width: 20px;
        top: 0;
        left: 0;
      }
    }

另外，還需要給三個小球的父容器通過關(guān)鍵幀動畫設(shè)置z-index值，來達(dá)到當(dāng)小球是在圍繞大球旋轉(zhuǎn)的視覺效果。

{animation: turn_atomZ 1.5s 0s ease infinite;}
@keyframes turn_atomZ {
      0%{
        z-index: 6;
      }
      50%{
        z-index: 6;
      }
      51%{
        z-index: 4;
      }
    }

三、第三種效果

這種效果就比較簡單了，只要改變小球的大小以及透明度就行了（透明度以及小球的寬高在初始時已定義）。

{animation: light 1.5s 0s ease infinite;}
@keyframes light {
      50%{
        opacity: 0.4;
        height: 15px;
        width: 15px;
      }
    }

四、第四種效果

初始時，四個小球定位到同一個位置，通過關(guān)鍵幀來改變小球的left值以及小球的大小即可。

{animation: r_ball 2s 0s ease infinite,r_ballZ 2s 0s ease infinite;}
@keyframes r_ball {
      50%{
        left: 100%;
      }
    }
    @keyframes r_ballZ {
      25%{
        transform: scale(0.5);
      }
      50%{
        transform: scale(1);
      }
    }

看完上述內(nèi)容，你們對怎么使用CSS3的頁面加載動畫有進(jìn)一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。