用css3製作旋轉載入動畫的幾種方法薦

以WebKit為核心的瀏覽器，例如Safari和Chrome，對html5有著很好的支援，在移動平臺中這兩個瀏覽器對應的就是IOS和Android。最近在開發一個移動平臺的web app，那麼就有機會利用css3去實現一些很酷的效果，這些效果原來更多的是利用圖片來實現。最近的一個改進就是利用css3製作旋轉載入動畫。以下將分別介紹幾種實現的方案。

方案1，圖片輔助

傳統做法是直接用動態的GIF圖片，這個方案是用PNG圖片加上背景顏色來模擬靜止的載入圖片，然後利用css中的animation處理圖片的旋轉。相比傳統方案，這個方案的好處是可以直接通過修改CSS來改變背景色，可以修改大小和旋轉速度。如下是具體的CSS程式碼：

 

@-webkit-keyframes rotate { 
  from {-webkit-transform:rotate(0deg);} 
  to {-webkit-transform:rotate(360deg);} 
} 
p#spinner { 
  height: 30px; 
  width: 30px; 
  overflow: hidden; 
  background: #000; 
  -webkit-mask-p_w_picpath: url("data:p_w_picpath/png[...]"); 
  -webkit-mask-size: 30px 30px; 
  -webkit-animation-name: rotate; 
  -webkit-animation-duration: 1.5s; 
  -webkit-animation-iteration-count: infinite; 
  -webkit-animation-timing-function: linear; 
} 

具體效果檢視這裡：Demo1

這個方案，只有safari可以很好地支援。chrome下支援不是很好，所以這是一個不太成熟的方案。

方案2， 純CSS實現

方案的思路是，首先用css渲染12個靜態的bar，每個bar間隔30度的角度，給每個bar新增背景變淡的動畫，但是相鄰bar的動畫效果延遲1/12秒，來保證12個bar是按順序變亮然後變暗。從而模擬出旋轉的效果。

這個旋轉效果是偽旋轉，所有的bar都沒有真正做到旋轉。

 

@-webkit-keyframes fade { 
    from {opacity: 1;} 
    to {opacity: 0.25;} 
} 
div.spinner { 
    position: relative; 
    width: 30px; 
    height: 30px; 
    display: inline-block; 
} 
div.spinner div { 
    width: 20%; 
    height: 40%; 
    background: #000; 
    position: absolute; 
    left: 100%; 
    top: 100%; 
    opacity: 0; 
    -webkit-animation: fade 1s linear infinite; 
    -webkit-border-radius: 30px; 
} 
div.spinner div.bar1 { 
    -webkit-transform:rotate(0deg) translate(0, -142%); 
        -webkit-animation-delay: 0s; 
} 
[......] 
div.spinner div.bar12 { 
    -webkit-transform:rotate(330deg) translate(0, -142%);  
    -webkit-animation-delay: -0.0833s; 
} 

具體效果檢視這裡：Demo2

safari和chrome都能很好地渲染這個效果，並且也很容易定義實際大小，因為所有的bar的高度，寬度有是用百分比來定義的。缺點也很明顯，需要定義12個bar，並且每個bar都要定義獨立的css，相對來說html和css的程式碼量有點多。

方案3，這個方案類似sencha touch中實現的效果

方案的基本思想是：首先利用html和css呈現4個bar，再通過css的偽元素: before和：after定義每個bar的前後內容，這樣使得由原始的4個bar產生12個bar的效果，其次通過css設定讓12個bar的透明度逐漸遞減，最後應用css3中旋轉動畫達到實際loading的效果。

 

.x-loading-spinner { 
    font-size: 250%; 
    height: 1em; 
    width: 1em; 
    position: relative; 
    -webkit-transform-origin: 0.5em 0.5em; 
} 
.x-loading-spinner > span, .x-loading-spinner > span:before, .x-loading-spinner > span:after { 
    display: block; 
    position: absolute; 
    width: 0.1em; 
    height: 0.25em; 
    top: 0; 
    -webkit-transform-origin: 0.05em 0.5em; 
    -webkit-border-radius: 0.05em; 
    border-radius: 0.05em; 
    content: " "; 
} 
.x-loading-spinner > span.x-loading-top { 
    background-color: rgba(170, 170, 170, 0.99); 
} 
.x-loading-spinner > span.x-loading-top::after { 
    background-color: rgba(170, 170, 170, 0.9); 
} 
.x-loading-spinner > span.x-loading-left::before { 
    background-color: rgba(170, 170, 170, 0.8); 
} 
.x-loading-spinner > span.x-loading-left { 
    background-color: rgba(170, 170, 170, 0.7); 
} 
.x-loading-spinner > span.x-loading-left::after { 
    background-color: rgba(170, 170, 170, 0.6); 
} 
.x-loading-spinner > span.x-loading-bottom::before { 
    background-color: rgba(170, 170, 170, 0.5); 
} 
.x-loading-spinner > span.x-loading-bottom { 
    background-color: rgba(170, 170, 170, 0.4); 
} 
.x-loading-spinner > span.x-loading-bottom::after { 
    background-color: rgba(170, 170, 170, 0.35); 
} 
.x-loading-spinner > span.x-loading-right::before { 
    background-color: rgba(170, 170, 170, 0.3); 
} 
.x-loading-spinner > span.x-loading-right { 
    background-color: rgba(170, 170, 170, 0.25); 
} 
.x-loading-spinner > span.x-loading-right::after { 
    background-color: rgba(170, 170, 170, 0.2); 
} 
.x-loading-spinner > span.x-loading-top::before { 
    background-color: rgba(170, 170, 170, 0.15); 
} 
.x-loading-spinner > span { 
    left: 50%; 
    margin-left: -0.05em; 
} 
.x-loading-spinner > span.x-loading-top { 
    -webkit-transform: rotate(0deg); 
    -moz-transform: rotate(0deg); 
} 
.x-loading-spinner > span.x-loading-right { 
    -webkit-transform: rotate(90deg); 
    -moz-transform: rotate(90deg); 
} 
.x-loading-spinner > span.x-loading-bottom { 
    -webkit-transform: rotate(180deg); 
    -moz-transform: rotate(180deg); 
} 
.x-loading-spinner > span.x-loading-left { 
    -webkit-transform: rotate(270deg); 
    -moz-transform: rotate(270deg); 
} 
.x-loading-spinner > span::before { 
    -webkit-transform: rotate(30deg); 
    -moz-transform: rotate(30deg); 
} 
.x-loading-spinner > span::after { 
    -webkit-transform: rotate(-30deg); 
    -moz-transform: rotate(-30deg); 
} 
.x-loading-spinner { 
    -webkit-animation-name: x-loading-spinner-rotate; 
    -webkit-animation-duration: 0.5s; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-timing-function: linear; 
} 
 
@-webkit-keyframes x-loading-spinner-rotate { 
    from { 
    -webkit-transform: rotate(30deg); 
    } 
    to { 
    -webkit-transform: rotate(330deg); 
    } 
} 

具體效果檢視這裡：Demo3

這個方案是3個方案中應用css技術最徹底的一個，html的程式碼最少，並且也真正做到了旋轉效果。缺點是不易擴充套件，chrome瀏覽器支援不是很理想。

綜上分析，方案1瀏覽器支援不好，但是實現簡單，方案2的html程式碼太多，但擴充套件好，瀏覽器支援不錯，方案3的擴充套件性不好，瀏覽器支援也不好，但是較好地利用了css的特性。

如果開發桌面web系統，推薦方案2，如果是mobile系統，則方案2和方案3各有優勢。