今天來給大家說說一個loading效果，一個同心圓弧形旋轉效果，在我們網頁平時加載時候可以使用這個來做loading效果，雖然說現在網頁優化好了很多，過渡時時間已經非常少了，但是理解這個案例，可以把其中的一些方法運用到其他的CSS3動畫當中去，這樣可以幫助我們更好的學會CSS3；
好了，話不多說，先來看看今天的效果。
今天還是不用JS，就用CSS3做一個循環動畫就好了。
先定義DOM，寫一個元素就行了
然後就是下樣式了，先做個居中顯示
我們今天做的一共畫三層圓弧，先畫最外一層的樣式：
再用偽元素畫中間一層的樣式：
再用偽元素畫最內一層的樣式：
定義一個自動循環動畫效果：
最後，應用動畫效果到每層，每層都執行自動動畫，時間差不一樣，產生交叉效果：
運行，就完成了
全部CSS源碼展示：
這次的課程，難點不多，主要還是在畫圓弧的地方，幾個知識點：
border-left/right-color （左右框顏色）
border-top/bottom-color（上下框顏色）
animation-duration（執行動畫一個週期的時間）
如果你也喜歡我的教程，點一下贊，轉發和關注一下吧，以後還會繼續出更多幹貨教程。
李老師的前端開發工程師班，在線學習課程馬上就要開班咯，你如果是零基礎學習，想成為前端開發工程師，也喜歡前端開發，還在猶豫什麼，快趁現在加入前端開發課程學習吧！
私聊回覆：“前端課程“可以獲得學習方法哦！
分享到:
閱讀更多 WEB開發李家靖 的文章
