CSS3如何實現loading動畫效果

這篇文章主要為大家展示了“CSS3如何實現loading動畫效果”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“CSS3如何實現loading動畫效果”這篇文章吧。

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

.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>

  &hellip; //為縮減篇幅省略中間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);}

&hellip; //節省篇幅，每個圓每隔30度遞增旋轉

.sk-fading-circle .sk-circle12 { transform: rotate(330deg);}

<div class="sk-fading-circle">

  <div class="sk-circle1 sk-circle"></div>

  &hellip; //為縮減篇幅省略中間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 {

  &hellip;&hellip;

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

&hellip; //為縮減篇幅省略中間代碼

.sk-fading-circle .sk-circle12:before { animation-delay: -0.1s; }

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

以上是“CSS3如何實現loading動畫效果”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！