今天，要實現一個長任務等待提示效果。
然后設計師就把做好的gif效果圖給我，就是下面這個：
按照大眾做法，我應該是把圖片直接按圖索驥，調調布局，然后早早回家抱老婆。
但是，我這個人，天生不安分守己。想到是用在客戶端，客戶端又是用的webkit內核，于是，立馬決定使用CSS3來折騰一番。
外面的光環很好實現，360度轉轉轉就OK. 但是，中間那個雞蛋轉轉轉的可不是好啃的骨頭啊。人家師傅餅前一分鐘，餅下十年功啊。
我生小輩想要習得這轉餅的精髓，可得要好生琢磨一番啊！
如果您手頭的是IE10+這類支持animation的現代瀏覽器，您可以狠狠地點擊這里：CSS3餅狀圖loading旋轉動畫demo
截圖是死的，demo是活的。建議點上面的地址去仔細對比CSS3實現和gif動畫效果。
不難發現，這個gif尺寸又大，效果也不流暢，還燒性能。相比之下，立馬被CSS3實現甩出了2條南京路。
CSS3效果更佳、性能更高、資源占用更少大家都認同了。關鍵是，這個大餅它是怎么轉起來的？
略復雜。
蛋餅旋轉技能傳授
師父領進門修行在個人，聽不懂我也沒辦法啦~~
我們肉眼看上去是一個雞蛋被攤在了整個餅上，實際上，這只是個障眼法。
實際攤的雞蛋，只有半個餅那么大。還有半個餅位置是長得像雞蛋的假雞蛋和長得像大餅的假大餅。顯然這句話你聽不懂，因為我自己都沒聽懂，哈哈~~所謂一圖勝千言，示意圖走起~
下圖示意的就是雞蛋餅上的雞蛋從100%變小成0的過程。
1. 這是沒有干擾的蛋餅，你看到的是半個假餅和半個假蛋。
2. 當我們煎餅動畫轉起的一瞬間，我們讓假的餅子隱藏回家打醬油去。于是，從上面看，我們看到的就是滿滿一層的雞蛋。
3. 真雞蛋轉起，你會發現，半個真雞蛋，由于逆時針旋轉，露出了點空（左側上部）。
demo對應效果類似(淺色看成雞蛋)：
4. 當真雞蛋旋轉了180度（半圈）的時候，真假雞蛋正好重合在了一起，于是就是看到的就是蛋餅上半面雞蛋。
demo對應效果類似：
demo對應效果類似：
6. 一直旋轉到360度，其完全被假的餅子遮蓋，一點雞蛋都看不到了。完成了從全部都0的動畫過程。這就是蛋餅轉轉轉的基本原理。
CSS3表示
可見，要實現我們想要的蛋餅效果，我們需要這些東西：
圓形的蛋餅子 – 對應下面類名為inner元素
旋轉的半面真雞蛋 – 對應下面類名為spiner的元素
不動的半面蛋餅子，前半程隱藏，后半程出現 – 對應下面類名為masker的元素
不動的半面假雞蛋，前半程出現，后半程隱藏 – 對應下面類名為filler的元素
新聞熱點
疑難解答
