CSS3 幾步即可實作loading動畫效果

例子1：菊花狀的Loading效果

１.第一步畫出靜态的小菊花。

sk-fading-circle {
  width: px;
  height: px;
  position: relative;
}
.sk-fading-circle .sk-circle {
  width: %;
  height: %;
  position: absolute;
  left: ;
  top: ;
}
.sk-fading-circle .sk-circle:before {
  content: '';
  display: block;
  margin:  auto;
  width: %;
  height: %;
  background-color: #333;
  border-radius: %;
}

<div class="sk-fading-circle">
  <div class="sk-circle"></div>
  … //為縮減篇幅省略中間10個div
  <div class="sk-circle"></div>
</div>
           

　　靜态小菊花其實是一個外層div裡嵌套12個小div。小div通過 border-radius畫成圓型，并通過margin: 0 auto;定位到頂格居中位置。由于12個小div都是absolute定位，是以都重疊在了一起。

2.第二步将12個重疊的圓分散開。

.sk-fading-circle .sk-circle2 { transform: rotate(deg);}
.sk-fading-circle .sk-circle3 { transform: rotate(deg);}
… //節省篇幅，每個圓每隔30度遞增旋轉
.sk-fading-circle .sk-circle12 { transform: rotate(deg);}

<div class="sk-fading-circle">
  <div class="sk-circle1 sk-circle"></div>
  … //為縮減篇幅省略中間10個div
  <div class="sk-circle12sk-circle"></div>
</div>
           

　　用transform的rotate将各個圓點旋轉，形成完整的菊花狀。如果你對transform不熟的話，看下圖，第二個圓點旋轉30度的示意圖，其餘圓點的旋轉自行腦補：

　

3.三步通過animation控制opacity屬性，讓每個點淡進淡出

@-webkit-keyframes sk-circleFadeDelay {
  0%, 39%, 100% { opacity: ; }
  40% { opacity: ; }
}
@keyframes sk-circleFadeDelay {
  0%, 39%, 100% { opacity: ; }
  40% { opacity: ; } 
}
.sk-fading-circle .sk-circle:before {
  ……
  animation: sk-circleFadeDelay s infinite ease-in-out both;
}
           

　　這樣每個點都在像信号燈一樣同步地閃爍。

4.最後一步，給每個點設定animation-delay延時，以錯開閃爍的時間，形成常見的菊花轉轉的效果

.sk-fading-circle .sk-circle2:before {animation-delay: -s; }
.sk-fading-circle .sk-circle3:before { animation-delay: -s; }
.sk-fading-circle .sk-circle4:before { animation-delay: -s; }
… //為縮減篇幅省略中間代碼
.sk-fading-circle .sk-circle12:before { animation-delay: -s; }
           

　　因為是12個圓點，每個圓點的閃爍間隔時間0.1s，是以第1個圓點沒有animation-delay延時，立即閃爍。第二個圓點，從-1.1s開始閃爍（負數不了解的話，參考animation一文，意思是從該時間點開始啟動，之前的動畫效果不顯示）。之後每個圓點均以0.1s遞增的速度延遲。最終形成常見的菊花轉轉的Loading效果

　　

　　

例子2：ios版菊花Loading

　　明白了原理後，無非是在例子1的基礎上，将圓點改成豎條，opacity半透明即可。

例子3：琴譜版Loading

1.第一步，畫出靜态琴譜，很簡單無非是一個外層div，内嵌幾個并排的div而已。

.spinner {
  height: 40px;
}
.spinner > div {
  background-color: #333;
  height: 100%;
  width: 6px;
  display: inline-block;
}

<div class="spinner">
  <div></div>
  … //你可以根據需求多加幾個div
  <div></div>
</div>
           

2.第二步，琴譜動起來

.spinner > div {
  ……
  animation: sk-stretchdelay s infinite ease-in-out;
}
@keyframes sk-stretchdelay {
  0%, 40%, 100% { transform: scaleY(); }  
  20% { transform: scaleY(); }
}
           

　　例1,2中用了transform的rotate實作旋轉。例3用了transform的scaleY實作拉伸

　　

3.最後一步，設定延時，讓每個琴鍵在不同時間内拉伸。

.spinner .rect2 {  animation-delay: -s; }
.spinner .rect3 { animation-delay: -s; }
.spinner .rect4 { animation-delay: -s; }
.spinner .rect5 { animation-delay: -s; }

<div class="spinner">
  <div class="rect1"></div>
  … //為節省篇幅省略中間代碼
  <div class="rect5"></div>
</div>
           

　　每個琴鍵的拉伸間隔時間0.1s，是以第1個琴鍵沒有animation-delay延時，立即拉伸。第二個琴鍵，從-1.1s開始閃爍。之後每個琴鍵均以0.1s遞增的速度拉伸。和菊花Loading的原理是一樣的，不贅述。