CSS3-loading動畫（四）

圖片看的效果然是不行，仍是戳下面網址看吧

在線示例：http://liyunpei.xyz/loading.html

十7、效果十七

 

三個小球，縱向居中，間距撐開，依次改變小球的translateY的值便可。

@keyframes leap_ball {
      50% {
        transform: translateY(60px);
      }
    }

十8、效果十八

 

三個小球，橫縱方向上均居中，經過外邊距撐開小球之間的距離，從效果上看是左右兩邊的兩個小球在圍繞中間小球作環繞運動，那麼咱們能夠直接讓小球的父元素來旋轉，來達到兩邊小球的環繞效果（父元素旋轉的時候，由於圓形，因此中間小球看不出是在旋轉，而且中間的位置也不會改變，從視覺上看，中間小球沒有作任何變化）。

@keyframes wind_ball {
      50% {
        transform: rotateZ(180deg);
      }
      100% {
        transform: rotateZ(360deg);
      }
    }

十9、效果十九

 

一共五個小球，每個小球執行的動畫都同樣，只是每一個小球的動畫延遲時間不一樣，而使小球的位置不一樣，將五個小球定位至同一個位置做爲統一塊兒點（這裏，我是將五個小球統必定位至最右邊）

{animation: cool_ballP 2s linear infinite, cool_ballS 2s linear infinite;}
@keyframes cool_ballP {
      80% {
        right: 75%;    //到達終點，開始返回起點
      }
    }
@keyframes cool_ballS {
      80% {               //到達終點
        top: 25%;
        width: 20px;
        height: 20px;
      }
      81% {               //開始返回起點，長度變大，寬度變小，模擬移動產生的形變
        top: 0;
        width: 25px;
        height: 15px;
      }
      99% {               //到達起點
        top: 0;
        width: 25px;
        height: 15px;
      }
       100% {             //恢復初始
        width: 20px;
        height: 20px;
      } 
    }

二10、效果二十

 

共八個小球，定位圍成一個圓，改變小球的寬度、高度便可（要保持小球改變的是以小球的圓心爲基準）

{animation: load_ball 1.6s linear infinite;}
@keyframes load_ball {
      50% {
        height: 0;
        width: 0;
      }
      80% {
        height: 0;
        width: 0;
      }
    }

（50%-80%小球維持寬度、高度保持0，造成了一半顯示，一半隱藏的效果）

二11、效果二十一

 

一共三個小球，每一個小球的運動軌跡依然是相同的，這裏，我將三個小球的中心定位到縱向頂部，橫向中心，而後分三個階段，先運動到右下角，再到左下角，最後返回起點。

（在每個階段接近中間的時間點，加上了透明度的改變）

@keyframes triangle_ball {
      16% {
        opacity: .6;
      }
      33% {
        left: 100%;
        top: 100%;
        opacity: 1;
      }
      50% {
        opacity: .6;
      }
      66% {
        left: 0;
        top: 100%;
        opacity: 1;
      }
      83% {
        opacity: .6;
      }
      99% {
        top: 0;
        left: 50%;
        opacity: 1;
      }
    }

二12、效果二十二

 

這相似於一個旋轉的齒輪，關鍵是如何作出一個齒輪的形狀來，一個div給實現邊框作裏面的圓，給div的僞類虛線邊框作外面的鋸齒，僞類的邊框越寬，鋸齒越稀鬆，反之，越密集。

作出來齒輪了，就剩下旋轉的小case了。

.gear_ball {
      height: 60px;
      width: 60px;
      border-radius: 50%;
      display: inline-block;
      border: 4px #fff solid;
      position: relative;
    }

    .gear_ball:after {
      content: '';
      position: absolute;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      top: -8px;
      left: -8px;
      border: 8px #fff dashed;
    }

 

今天的分享結束，明天週五，再來一波，撒花完結