今天整理的這個動畫估計大家都不會陌生，彩環旋轉，看過之后是不是覺得很熟悉，對，這個就是優酷視頻APP里面的加載動畫。本人空余時間喜歡看些視頻，留意到這個動畫后就想用代碼實現出來，今天整理了下，跟大家分享，如果有大牛能提出更好的實現方法，歡迎補充。案例請在chrome中查看。
這個動畫的實現也非常簡單，並沒有使用太復雜的技術。關鍵點在於把四個變換背景色的元素分離出來，然后延遲動畫開始的時間。動畫的關鍵幀定義為變換四個背景顏色。
1. 先看截圖
2. 代碼實現思路
2.1 定義一個方形的容器。
2.2 定義四個不同背景色的方形子元素。
2.3 定義一個橢圓形的元素蓋在子元素上方，橢圓形元素的背景色為頁面背景色，這樣就形成了圓環的效果。
2.4 在元素中心定義一個三角形元素，形成一個播放按鈕。
最后在四個方形子元素上應用動畫，延時改變其背景色。最后的效果就是圓環的四個部分輪流改變其背景色。
3. 源代碼
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" Content="text/html; charset=utf-8;"> 5 <title>CSS3實現加載的動畫效果7</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:#e2e2e2;} 12 .m-load{width:240px;height:240px;margin:100px auto;background:url('load.png') center center no-repeat;} 13 14 /** 加載動畫的靜態樣式 **/ 15 .m-load2{position:relative;width:95px;height:95px;margin:100px auto;border-radius:44px;overflow:hidden;} 16 .m-load2:before,.m-load2:after,.m-load2 .item{float:left;width:50%;height:50%;} 17 .m-load2:before{content:'';background:#e36767;} 18 .m-load2:after{content:'';background:#6BB9DD;} 19 .m-load2 .item:nth-child(1){background:#F6CB7D;} 20 .m-load2 .item:nth-child(2){background:#6BA374;} 21 .m-load2 .circle{position:absolute;left:50%;top:50%;width:60px;height:60px;margin:-30px 0 0 -30px;background:#e2e2e2;border-radius:28px;} 22 .m-load2 .circle:before{content:'';position:absolute;left:2%;top:20%;width:0;height:0;overflow:hidden;border-top:18px solid #CCC;border-left:18px solid #ccc;border-right:18px solid transparent;border-bottom:18px solid transparent;-webkit-transform:rotate(135deg) skew(12deg,12deg);} 23 24 /** 加載動畫 **/ 25 @-webkit-keyframes load{ 26 0%{background:#e36767;} 27 24.9%{background:#e36767;} 28 25%{background:#F6CB7D;} 29 49.9%{background:#F6CB7D;} 30 50%{background:#6BB9DD;} 31 74.9%{background:#6BB9DD;} 32 75%{background:#6BA374;} 33 99.9%{background:#6BA374;} 34 } 35 .m-load2:before{-webkit-animation:load 1s linear infinite;} 36 .m-load2 .item:nth-child(1){-webkit-animation:load 1s linear .25s infinite;} 37 .m-load2:after{-webkit-animation:load 1s linear .5s infinite;} 38 .m-load2 .item:nth-child(2){-webkit-animation:load 1s linear .75s infinite;} 39 </style> 40 </head> 41 42 <body> 43 <div class="m-load"></div> 44 45 <div class="m-load2"> 46 <div class="item"></div> 47 <div class="item"></div> 48 <div class="circle"></div> 49 </div> 50 </body> 51 </html>