CSS實現Loading載入動畫

標籤：http   io   使用   ar   java   sp   div   art   on   

優秀的前端工程師總是優先考慮用CSS替代圖片：

如上。這個動畫並非GIF，而是純CSS繪製，通過JavaScript定時器更新動畫。

基本思路是建立8個圓形div，絕對位置排列成圓圈，然後，依次通過opacity屬性更新透明度，就得到一個loading的。

和GIF相比，CSS實現的好處主要在於，對於不同背景顏色，該動畫都是完美的，還可以用CSS輕鬆實現陰影、發光等特效，而GIF雖然支援透明色，但建立時選擇的背景色和實際背景色不一致會導致有明顯的毛邊，而且GIF不易動態更新，需要重建圖片。

CSS方式完全可以通過封裝成jQuery外掛程式實現非常簡單卻異常強大的loading動畫，缺點是IE不支援border-radius，所以IE下看到的是方塊。

如果你不想自己寫代碼，這裡有一個可視化線上產生CSS3 Loading動畫的網站，相當強大：

http://fgnass.github.io/spin.js/

產生的程式碼除了在現代瀏覽器中正常工作外，還可以使用VML來相容落後的IE瀏覽器，最低相容到IE6！

CSS實現Loading載入動畫