這些好看的loading效果，你還只會用第三方庫嗎？CSS3教你實現
前言
loading效果在實際開發中是很常見的，尤其是在Ajax請求的時候，可以給用戶一個很好的交互體驗。
今天這篇文章我們一起來看看如何通過CSS3實現各種不同的loading效果吧，文章中的代碼可以從公眾號前端群自取。
CSS3
實現效果
首先我們來看看需要實現的效果。
效果圖
然后我們一個個來看都是怎么實現的吧。
loadingA
loadingA的效果就如音樂播放時的動態條一般，不停的連續執行。
其主要實現思路如下：
-
每個豎狀條都是一個簡單的div，div為一個小的圓形。
-
給每個div加上一個動畫效果，該動畫的效果是高度逐漸變長，最后再變回原樣。
-
每個div延遲不同的時間才開始執行，這樣就會有先后的層次感。
然后我們來看看各個部分的代碼實現。
-
基本的div元素
基本的div元素是一個小的圓形。
基本的div元素
-
定義動畫
定義的動畫主要是改變div的高度，在完成50%的時候達到最高值，完成100%時恢復到原來高度。
動畫效果
-
設置動畫
將定義的動畫添加至animation屬性，設置一個動畫總執行時間，然后給5個div設置不同的延時時間。
設置動畫
-
HTML元素
將以上設置的CSS屬性都添加至HTML元素中。
HTML元素
將以上代碼寫完后，直接在瀏覽器運行就可以看到如loadingA的效果了。
loadingB
如果細心的看完loadingA的實現過程，一定可以聯想到loadingB的實現。
loadingA是通過給高度加動畫，那么loadingB就是通過給寬度加動畫，同樣給5個div不同的延遲時間。
這里我只給出其動畫定義，其他的內容與loadingA類似，詳細的內容可以通過github去看。
loadingB動畫
loadingC
loadingC的實現效果如下。
loadingC
在loadingA和loadingB中是通過給高度和寬度增加動畫實現的，而loadingC是通過給五個div增加縱向位移實現的。
loadingC實現的關鍵點就在於translateY的使用，因為動畫是從下往上跳動，所以在完成度50%時，translateY設定為負值。
其定義的動畫部分代碼如下所示。
定義動畫
loadingD
loadingD的實現效果如下。
loadingD效果
通過效果圖我們發現有兩點差異：
-
loading過程中透明度會發生變化，這個通過opacity實現。
-
在接近完成時有個上下輕微抖動的效果，這個通過設置小單位的正負translateY值。
得到的動畫代碼如下。
loadingD動畫
loadingE
loadingE的動畫效果如下。
loadingE
loadingE的效果同loadingD類似，loadingD是通過縱向的位移變換，可以通過translateY實現。
loadingE是通過水平方向位移變換，可以通過translateX來實現。
而有一點不同的是，loadingE的div初始位置就是translateX(-300px)，表示從左側開始運動。
loadingE動畫
loadingF
loadingF定義的動畫如下所示。
loadingF
loadingF是旋轉效果，可以很容易想到是通過rotate實現。
loadingF中只有一個div，邊框設置為虛線即可，其CSS樣式如下。
loadingF基本樣式
其定義的動畫樣式如下。
loadingF定義動畫
loadingG&loadingH
loadingG與loadingH的動畫效果如下。
loadingG&loadingH
loadingG與loadingH類似，loadingH在loadingG的基礎上增加了幾個點。
loadingG中是通過設置一個縱向的div-1，在該div-1內增加一個div-2，div-2就是轉動的圓點，div-2通過絕對定位計算出實際位置，當div-1大小變化時，div-2也應該重新計算位置。
div-2的CSS代碼如下所示。
loadingG基本樣式
在loadingH中，div-1內有四個div，分別表示轉動的四個圓點，也是通過絕對定位計算偏移位置。
最后設置動畫，只需要讓div-1在一個動畫周期內旋轉360度即可。
loadingG
loadingI
loadingI的效果圖如下所示。
loadingI
loadingI的動畫主要涉及到放大縮小和旋轉兩個方面，放大縮小通過scale實現，旋轉通過rotate實現。具體的可以看看github上的完整代碼。
結束語
今天這篇文章主要是教大家如何使用CSS3的動畫特性去實現loading效果，完全可以不用借助於第三方庫，大家也動動手自己實現一下吧。全部代碼的話在微信公眾號群文件獲取！
如果你覺得這篇文章對你有幫助，請關注我的 “web前端EDU ”公眾號！~謝謝
