CSS3頁面加載動畫

今天就跟大家聊聊有關CSS3頁面加載動畫，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。

在之前的文章【CSS3學習之頁面加載動畫（二）】中又分享了6個CSS3的加載動畫，今天繼續分享（標題接上一次），圖片看得不真切。

十一、效果十一

四個小球分別包含于四個正方形p，將小球相對于正方形定位（top：0；left：0），將方形p設置旋轉，使小球分別位于四角，然后使用關鍵幀動畫控制小球在當前位置與靠近中心點的位置之間來回移動

{animation: flor_move 1s 0s ease infinite;}
@keyframes flor_move {      50%{
        top: 25px;
        left: 25px;
      }
    }

還剩下一個旋轉的效果，這個便交給方形p的父級元素

{animation: flor_rote 2s 0s ease infinite;}@keyframes flor_rote {
      25%{
        transform: rotateZ(90deg);
      }
      50%{
        transform: rotateZ(180deg);
      }
      75%{
        transform: rotateZ(270deg);
      }
      100%{
        transform: rotateZ(360deg);
      }
    }

十二、效果十二

這個效果實現起來不難，將九個小球固定好位置，改變小球透明度即可（每個小球要設置不一樣動畫時間）

@keyframes mar_ligt {
      50%{
        opacity: 0.4;
      }
    }

十三、效果十三

還是九個小球，不過這里改變了小球的大小，為了防止因為改變大小而致使排版錯亂，所以每個小球都包含在固定寬高的p中，使小球在p中橫縱方向上時刻居中。這樣就可以放心地改變小球的大小了（每個小球依然設置不同的動畫時間）

@keyframes mar_ligts {
      50%{
        transform: scale(.5);
        opacity: 0.4;
      }
    }

十四、效果十四

撞球效果，四個小球橫縱方向居中排列，中間兩個小球不動，左右兩邊的小球分別向兩邊來回移動（注意運動的時間差即可）。

{animation: poolball_l 1s .5s linear infinite;}   //左邊的小球
{animation: poolball_r 1s 0s linear infinite;}    //右邊的小球@keyframes poolball_l {
      25%{
        transform: translateX(-100%);
      }
      50%{
        transform: translateX(0);
      }
    }
    @keyframes poolball_r {
      25%{
        transform: translateX(100%);
      }
      50%{
        transform: translateX(0);
      }
    }

十五、效果十五

這是一個很常見的效果，同樣的為了防止因為小球大小的改變而使頁面排版發生錯亂，在小球外面加套一層固定寬高的p。

對每個小球還要設置動畫延遲

{animation: size_change 1.2s linear infinite;}@keyframes size_change {
      20%{
        width: 0;
        height: 0;
      }
      40%{
        width: 0;
        height: 0;
      }
      50%{
        width: 20px;
        height: 20px;
      }
    }

十六、效果十六

五個小球，只需橫向居中，通過外邊距來撐開小球之間的距離，通過關鍵幀動畫改變小球的translateY、以及寬高和透明度。

小球初始寬高為15px，透明度為.6。

{animation: flip_ballP 1.2s ease infinite,flip_ballS 1.2s ease infinite;}@keyframes flip_ballP {
      50%{
        transform: translateY(60px);
      }
    }
    @keyframes flip_ballS {
      50%{
        height: 15px;
        width: 15px;
        opacity: 0.6;
      }
      75%{
        height: 20px;
        width: 20px;
        opacity: 1;
      }
    }

未完待續！

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