網頁前端開發同心圓弧旋轉 loading 特效

今天來給大家說說一個loading效果，一個同心圓弧形旋轉效果，在我們網頁平時載入時候可以使用這個來做loading效果，雖然說現在網頁優化好了很多，過渡時時間已經非常少了，但是理解這個案例，可以把其中的一些方法運用到其他的CSS3動畫當中去，這樣可以幫助我們更好的學會CSS3；

好了，話不多說，先來看看今天的效果。

GIF

今天還是不用JS，就用CSS3做一個循環動畫就好了。

先定義DOM，寫一個元素就行了

然後就是下樣式了，先做個居中顯示

我們今天做的一共畫三層圓弧，先畫最外一層的樣式：

再用偽元素畫中間一層的樣式：

再用偽元素畫最內一層的樣式：

定義一個自動循環動畫效果：

最後，應用動畫效果到每層，每層都執行自動動畫，時間差不一樣，產生交叉效果：

運行，就完成了

GIF

全部CSS源碼展示：

這次的課程，難點不多，主要還是在畫圓弧的地方，幾個知識點：

border-left/right-color （左右框顏色）

border-top/bottom-color（上下框顏色）

animation-duration（執行動畫一個周期的時間）

如果你也喜歡我的教程，點一下贊，轉發和關注一下吧，以後還會繼續出更多乾貨教程。

李老師的前端開發工程師班，在線學習課程馬上就要開班咯，你如果是零基礎學習，想成為前端開發工程師，也喜歡前端開發，還在猶豫什麼，快趁現在加入前端開發課程學習吧！

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！