loading動畫大全

 

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

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

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

{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;
      }}

# 

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

@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);
      }}

# 

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

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

{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;
      }}

以上是loading動畫大全的詳細內容。更多資訊請關注PHP中文網其他相關文章！