CSS3裡怎麼實現loading動畫效果

今天我們來教大家怎麼用CSS3做出Loading的動畫效果。為什麼要用Loadning做出動畫效果，我們為大家做一個實例，相信看了以後你一切的迷惑都會雲消霧散。

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

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中文網其他相關文章！