使用css3實現小菊花加載效果

　　最常見的就是我們用到的加載動畫。加載動畫的效果處理的好，會給頁面帶來畫龍點睛的作用，而使用戶願意去等待。而頁面中最常用的做法是把動畫做成gif格式，當做背景圖或是img標簽來引用，這種方式最簡單，也不會有兼容性的問題。不過最近再搗鼓CSS，看到一些動畫的效果，不管是簡單也好，復雜也好，就是想嘗試用代碼來實現它，換一種思維方式，就算在項目中用到的可能性很小，自己多動手多寫寫總歸不會有壞處。

　　CSS3新增了很多強大的功能，雖然會有兼容性的問題，但是阻擋不了我們去使用它的這些新特性。像一些簡單的動畫以前靠畫圖工具來實現，現在單純用CSS也能非常簡單的實現。下面的案例就是利用CSS加html如何實現菊花旋轉的動畫。

HTML代碼如下：　

 1 <div class="wrapper">
 2      <div class="line1"></div>
 3      <div class="line2"></div>
 4      <div class="line3"></div>
 5      <div class="line4"></div>
 6      <div class="line5"></div>
 7      <div class="line6"></
 
div>
 8      <div class="line7"></div>
 9      <div class="line8"></div>
10      <div class="line9"></div>
11      <div class="line10"></div>
12      <div class="line11"></div>
13      <div class="line12"></div>
14 </div>

CSS代碼如下：

 1 @-webkit-keyframes loading {
 2   from {opacity: 1;width:3px;height:20px;}
 3   to {opacity: 0.25;width:3px;height:20px;}
 4 }
 5 div.wrapper {
 6   position: absolute;
 7   //top:50%;
 8   left:50%;
 9   display: inline-block;
10   zoom: 0.3; /*通過修改這個值(值的區間為0-1)的大小來設置菊花的大小*/
11 }
12 div.wrapper div {
13   width:3px;
14   height:16px;
15   background: #a4a2a4;
16   position: absolute;
17   left: 100%;
18   top: 100%;
19   opacity: 0;
20 
21   -webkit-animation: loading 1.2s linear infinite;
22 }
23 div.wrapper div.line1 {-webkit-transform:rotate(0deg) translate(0, -34px); -webkit-animation-delay: 0s;}
24 div.wrapper div.line2 {-webkit-transform:rotate(30deg) translate(0, -34px); -webkit-animation-delay: 0.1s;}
25 div.wrapper div.line3 {-webkit-transform:rotate(60deg) translate(0, -34px); -webkit-animation-delay: 0.2s;}
26 div.wrapper div.line4 {-webkit-transform:rotate(90deg) translate(0, -34px); -webkit-animation-delay: 0.3s;}
27 div.wrapper div.line5 {-webkit-transform:rotate(120deg) translate(0, -34px); -webkit-animation-delay: 0.4s;}
28 div.wrapper div.line6 {-webkit-transform:rotate(150deg) translate(0, -34px); -webkit-animation-delay: 0.5s;}
29 div.wrapper div.line7 {-webkit-transform:rotate(180deg) translate(0, -34px); -webkit-animation-delay: 0.6s;}
30 div.wrapper div.line8 {-webkit-transform:rotate(210deg) translate(0, -34px); -webkit-animation-delay: 0.7s;}
31 div.wrapper div.line9 {-webkit-transform:rotate(240deg) translate(0, -34px); -webkit-animation-delay: 0.8s;}
32 div.wrapper div.line10 {-webkit-transform:rotate(270deg) translate(0, -34px); -webkit-animation-delay: 0.9s;}
33 div.wrapper div.line11 {-webkit-transform:rotate(300deg) translate(0, -34px); -webkit-animation-delay: 1.0s;}
34 div.wrapper div.line12 {-webkit-transform:rotate(330deg) translate(0, -34px); -webkit-animation-delay: 1.1s;}

使用css3實現小菊花加載效果