今天做的這個動畫叫CD光牒旋轉，名字自己取的。動畫的效果估計很多人都很熟悉，就是微信朋友圈裡的加載動畫。做過前面幾個動畫，發現其實都一個原理，就是如何将動畫的元素如何分離出來。這個動畫的實作也很簡單，關鍵點在于如何将元素拼湊成風車形狀。然後定義動畫的關鍵幀為rotate 360度，應用于整個元素上，就可以使整個元素旋轉起來。案例在請在chrome中檢視。
1. 先看截圖
2. 代碼實作思路
2.1 首先還是定義四個元素，元素的中心為這四個元素組成的圓的圓心。這樣定義的目的可以保證元素拼湊成一個正圓。
2.2 在單個元素的頭尾各定義一個子元素，子元素旋轉一定的角度，使其平行排列，中間剛好留一個正圓的位置。這裡用了rotate和translate屬性，沒有用skew屬性，是因為skew方法會使元素拉伸後變小。
2.3 将每個元素的子元素都定義不同的背景色，定義完成後，會形成8個不同的顔色排列，此時元素的形狀已經産生了。需要注意的是，最後一個元素需要裁剪下，因為有可能會覆寫第一個元素。案例中第4，8個子元素是分開寫的。
2.4 此時在圓心位置定義一個圓，圓的大小剛好覆寫中間的空隙位置。外層容器也設為一個圓，大小為能全部顯示所有的背景顔色，多餘的部分截斷隐藏。
2.5 定義動畫，并在外層容器上應用這個動畫。這個動畫的方式比較簡單，就是旋轉，直接使用rotate即可。
3. 源代碼