第一步畫出靜態的小菊花。

sk-fading-circle {
  width: 40px;
  height: 40px;
  position: relative;
}
.sk-fading-circle .sk-circle {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.sk-fading-circle .sk-circle:before {
  content: '';
  display: block;
  margin: 0 auto;
  width: 15%;
  height: 15%;
  background-color: #333;
  border-radius: 100%;
}
 
<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定位，因此都重疊在了一起。

第二步將12個重疊的圓分散開。

.sk-fading-circle .sk-circle2 { transform: rotate(30deg);}
.sk-fading-circle .sk-circle3 { transform: rotate(60deg);}
… //節省篇幅，每個圓每隔30度遞增旋轉
.sk-fading-circle .sk-circle12 { transform: rotate(330deg);}
 
<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度的示意圖，其余圓點的旋轉自行腦補：

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

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

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

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

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

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

通過這個案列相信你已經完全掌握了怎樣用Loadning做出動畫效果，更多精彩請關注php中文網其它相關文章！

相關閱讀：

怎樣用canvas實現小球和鼠標的互動

怎樣用canvas做出粒子噴泉動畫的效果

css3點擊顯示漣漪特效

以上就是CSS3里怎么實現loading動畫效果的詳細內容，更多請關注php中文網其它相關文章！