上次簡單的介紹了下如何用代碼實現菊花旋轉的加載動畫，動畫點擊，這次繼續我們的動畫系列，實現另外一種加載動畫，圓環旋轉。與上次不同的是，菊花旋轉是通過改變元素透明度來實現動畫，這次因為考慮到元素疊加，加上元素本身帶有背景色，如果改變透明度會影響效果，所以直接改變元素的背景顏色，加上適當的延時，就可以實現這種圓環的效果。動畫實現的根本原理就是將每個需要變化的元素以及變化的過程分離出來。
所有的動畫在chrome中調試，未考慮到兼容性以及性能問題，只是單純的介紹如何實現效果。如果有更好的方法會及時更新。
1.先看gif圖
2.代碼實現思路
實現這個動畫關鍵點在於如何將每個變化的元素分離出來，並且實現這個圓環效果。用圖片說明下：
2.1 先定義元素容器，元素的兩塊內容寬度為50%，絕對定位，距離左側50%，這樣是方便內容繞着元素中心旋轉。
2.2 每個子元素定義左邊框，邊框的顏色和外層容器的背景色相同，這樣有鏤空的感覺，注意的是子元素需左移邊框一半的寬度，確保容器的中心為邊框的中心，不然子元素旋轉的時候會有誤差。
2.3 定義每個子元素旋轉的度數，打造出扇形的形狀，最后拼成右邊圓的形狀。
2.4 將右邊圓的所有子元素復制，旋轉180度，拼出左邊圓的形狀，此時左邊圓的子元素會覆蓋右邊的形狀，所以要使用clip進行裁切，只顯示左邊圓的部分。這時構成一個完整的圓的所有元素就齊了，顯示如2.5.
2.6 此時元素的形狀還不是標准的圓，在元素上覆蓋與背景同色的圓，然后外層容器使用border-radius形成一個正圓，這時整個元素顯示為環形形狀。
2.7 定義動畫的關鍵幀，並用在每個子元素上。這個動畫就是改變每個子元素的背景色，順時針延遲動畫的開始時間，最終就形成了gif圖中的顯示方式。
3. 主要使用的技術
這個動畫其實並不復雜，也沒用到多深奧的技術，主要還是使用了transform和animation屬性，這里不詳細解釋使用用法了。
另外還用到clip屬性，控制元素的顯示范圍，裁剪絕對定位元素。這個屬性定義一個裁剪矩形，在這個矩形范圍內的元素才可見。
使用方法：clip:rect(0px,16px,32px,1px);
四個有效值為：rect (top, right, bottom, left)
4. 源代碼
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" Content="text/html; charset=utf-8;"> 5 <title>CSS3實現加載的動畫效果2</title> 6 <meta name="author" content="rainna" /> 7 <meta name="keywords" content="rainna's css lib" /> 8 <meta name="description" content="CSS3" /> 9 <style> 10 *{margin:0;padding:0;} 11 body{background:#e7e7e7;} 12 13 .m-load,.m-load2{width:32px;height:32px;margin:100px auto;} 14 .m-load{background:url('load.gif') center center no-repeat;} 15 16 /** 加載動畫的靜態樣式 **/ 17 .m-load2{position:relative;border-radius:32px;overflow:hidden;} 18 .m-load2 .box,.m-load2 .item{position:absolute;left:50%;top:0;width:50%;height:100%;} 19 .m-load2 .item{left:0;width:100%;-webkit-transform-origin:left center;} 20 .m-load2 .item:before{content:'';position:absolute;left:-1px;top:0;width:100%;height:100%;background:#444;border-left:2px solid #e7e7e7;} 21 .m-load2 .item:nth-child(2){-webkit-transform:rotate(45deg);} 22 .m-load2 .item:nth-child(3){-webkit-transform:rotate(90deg);} 23 .m-load2 .item:nth-child(4){-webkit-transform:rotate(135deg);} 24 .m-load2 .item:nth-child(5){-webkit-transform:rotate(180deg);} 25 .m-load2 .box:nth-child(2){-webkit-transform:rotate(180deg);-webkit-transform-origin:left center;clip:rect(0px,16px,32px,1px);} 26 .m-load2 .circlebg{position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;background:#e7e7e7;border-radius:22px;} 27 28 /** 加載動畫 **/ 29 @-webkit-keyframes load{ 30 0%{background:#e7e7e7;} 31 100%{background:#444;} 32 } 33 .m-load2 .box:nth-child(1) .item:nth-child(1):before{-webkit-animation:load 0.8s linear 0s infinite;} 34 .m-load2 .box:nth-child(1) .item:nth-child(2):before{-webkit-animation:load 0.8s linear 0.1s infinite;} 35 .m-load2 .box:nth-child(1) .item:nth-child(3):before{-webkit-animation:load 0.8s linear 0.2s infinite;} 36 .m-load2 .box:nth-child(1) .item:nth-child(4):before{-webkit-animation:load 0.8s linear 0.3s infinite;} 37 .m-load2 .box:nth-child(2) .item:nth-child(1):before{-webkit-animation:load 0.8s linear 0.4s infinite;} 38 .m-load2 .box:nth-child(2) .item:nth-child(2):before{-webkit-animation:load 0.8s linear 0.5s infinite;} 39 .m-load2 .box:nth-child(2) .item:nth-child(3):before{-webkit-animation:load 0.8s linear 0.6s infinite;} 40 .m-load2 .box:nth-child(2) .item:nth-child(4):before{-webkit-animation:load 0.8s linear 0.7s infinite;} 41 </style> 42 </head> 43 44 <body> 45 <div class="m-load"></div> 46 47 <div class="m-load2"> 48 <div class="box"> 49 <div class="item"></div> 50 <div class="item"></div> 51 <div class="item"></div> 52 <div class="item"></div> 53 <div class="item"></div> 54 </div> 55 <div class="box"> 56 <div class="item"></div> 57 <div class="item"></div> 58 <div class="item"></div> 59 <div class="item"></div> 60 </div> 61 <div class="circlebg"></div> 62 </div> 63 </body> 64 </html>