CSS3里怎么完成loading動(dòng)畫效果

第一步畫出靜態(tài)的小菊花。

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個(gè)div
  <div class="sk-circle"></div>
</div>

代碼如上，靜態(tài)小菊花其實(shí)是一個(gè)外層div里嵌套12個(gè)小div。小div通過 border-radius畫成圓型，并通過margin: 0 auto;定位到頂格居中位置。由于12個(gè)小div都是absolute定位，因此都重疊在了一起。

第二步將12個(gè)重疊的圓分散開。

.sk-fading-circle .sk-circle2 { transform: rotate(30deg);}
.sk-fading-circle .sk-circle3 { transform: rotate(60deg);}
… //節(jié)省篇幅，每個(gè)圓每隔30度遞增旋轉(zhuǎn)
.sk-fading-circle .sk-circle12 { transform: rotate(330deg);}
 
<div class="sk-fading-circle">
  <div class="sk-circle1 sk-circle"></div>
  … //為縮減篇幅省略中間10個(gè)div
  <div class="sk-circle12sk-circle"></div>
</div>

代碼如上，用transform的rotate將各個(gè)圓點(diǎn)旋轉(zhuǎn)，形成完整的菊花狀。如果你對(duì)transform不熟的話，看下圖，第二個(gè)圓點(diǎn)旋轉(zhuǎn)30度的示意圖，其余圓點(diǎn)的旋轉(zhuǎn)自行腦補(bǔ)：

第三步通過animation控制opacity屬性，讓每個(gè)點(diǎn)淡進(jìn)淡出

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

這樣每個(gè)點(diǎn)都在像信號(hào)燈一樣同步地閃爍。

最后一步，給每個(gè)點(diǎn)設(shè)置animation-delay延時(shí)，以錯(cuò)開閃爍的時(shí)間，形成常見的菊花轉(zhuǎn)轉(zhuǎn)的效果

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

因?yàn)槭?2個(gè)圓點(diǎn)，每個(gè)圓點(diǎn)的閃爍間隔時(shí)間0.1s，因此第1個(gè)圓點(diǎn)沒有animation-delay延時(shí)，立即閃爍。第二個(gè)圓點(diǎn)，從-1.1s開始閃爍（負(fù)數(shù)不理解的話，參考animation一文，意思是從該時(shí)間點(diǎn)開始啟動(dòng)，之前的動(dòng)畫效果不顯示）。之后每個(gè)圓點(diǎn)均以0.1s遞增的速度延遲。最終形成常見的菊花轉(zhuǎn)轉(zhuǎn)的Loading效果

通過這個(gè)案列相信你已經(jīng)完全掌握了怎樣用Loadning做出動(dòng)畫效果，更多精彩請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！

相關(guān)閱讀：

怎樣用canvas實(shí)現(xiàn)小球和鼠標(biāo)的互動(dòng)

怎樣用canvas做出粒子噴泉?jiǎng)赢嫷男Ч?/a>

css3點(diǎn)擊顯示漣漪特效

以上就是CSS3里怎么實(shí)現(xiàn)loading動(dòng)畫效果的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！