我們國家的人數(shù)眾多，導致的結果就是不管去干啥都要排隊，都要等待。當然這是理想狀態(tài)，現(xiàn)實中的情況卻是大家一擁而上，根本不管什么排隊不排隊的。就算勉強排成了隊形，也總是有些人插隊，插隊不是某一類人，而是全員，從年邁的老人到高素質的大學生，從公司白領到抱孩子的女人。總之，插隊已經成為全全民參與的一項運動。當我遇見這種情況的時候，總是會無奈的嘆口氣，然后悄然的跟著插隊的人站在他的后面，從容不迫的完成我的“插隊”之舉。
在面臨排隊的時候，那可真是眾生相十足啊，有人看書，有人看手機，有人和旁邊的人閑聊，有人打電話，有人看天空，有人雙眼盯著那些插隊的人嘴里罵罵咧咧。都是無聊鬧的……那么我們在頁面中也會出現(xiàn)類似的忙碌情況，當有大量圖片加載或者網(wǎng)速沒有足夠快。訪問者望著一片白的瀏覽器，估計沒有人能堅持幾秒鐘直接就關閉了。這種情況不是我們網(wǎng)頁制作者愿意見到的。可是我們管不了分配帶寬，也管不了網(wǎng)站編輯。怎么辦？
我們能做的就是通過自己已經掌握的知識來為遇見的新問題來提供解決方案。添加一個loading效果的圖標是一個很好的解決方案，在CSS3之前都會用到一張小小的GIF來實現(xiàn)loading的效果。
而在CSS3出現(xiàn)了transform:rotate();之后我們就可以用一張體積較小的JPG圖片來代替體積較大的GIF圖片，甚至圖形也直接用CSS來生成，例如用《border一點都不簡單》一文中的border來生成三角形;也可以用CSS中十分生僻的屬性Clip-Path:polygon();來做更復雜的圖形。
先來看看瀏覽器對transform:rotate();的支持情況。
瀏覽器對CSS屬性transform的支持情況
還不錯~圖上有黃色小點的地方就是說需要加私有前綴。主流瀏覽器的主要版本都支持這哥們，IE8及之前版本的IE不支持，IE9需要添加-ms-私有前綴。不過IE9只能支持transform的2D轉換，對于3D轉換-ms-transform:rotate3d();會完全無感。
transform:rotate();的括號里面要填寫的是需要旋轉的度數(shù)。例如90deg表述的就是90°。有了旋轉了，還必須配合CSS中高級裝逼利器animation和@keyframes來創(chuàng)建動畫。關于它們的用法，后續(xù)的文章介紹基礎CSS的時候，我會詳細說明，這里只是說它的作用是做動畫的。看示例DEMO就會對這兩貨有一定的感性了解。
很有意思是吧！讓animation控制圖形元素進行transform:rotate();就能實現(xiàn)loading效果。這是基本技術原理。用CSS制作簡單的圖形有幾種方法，除前文舉例的border制作三角形之外還有用Clip-Path:polygon();制作較為復雜的多邊形，不過這哥們太生僻了而且對瀏覽器支持不廣泛。這里我決定用box-shadow屬性和border-radius屬性來制作由小圈圈組成的圓環(huán)。
通過border-radius來設置一個圓形，然后通過box-shadow的多重陰影來設置“環(huán)”上的其他點：
/*border-radius和box-shadow生成圓環(huán)*/
div {
margin: 50px auto;
width: 4px;
height: 4px;
border-radius: 2px;
box-shadow: 0 -12px 0 3px #000,
0 12px 1px 1px #333,
-12px 0 2px 1px #333,
12px 0 0 1px #333,
-9px -9px 3px 1px #333,
9px -9px 0 2px #333,
-9px 9px 1px 1px #333,
9px 9px 0 1px #333;
}
想讓我們的小“圓環(huán)”動起來的話，只需要給這個<div>的CSS樣式添加animation的聲明即可。不過在這之前我們需要用@keyframes來設置我們的圖形的旋轉效果。
/*@keyframes設置*/
/*為了保證兼容性，清設置私有制前綴，總有些人懶得升級自己的瀏覽器。*/
@-moz-keyframes gif-loading {
from{transform: rotate(360deg);}
to{transform: rotate(0deg);}
}
@-o-keyframes gif-loading {
from{transform: rotate(360deg);}
to{transform: rotate(0deg);}
}
@-webkit-keyframes gif-loading {
from{transform: rotate(360deg);}
to{transform: rotate(0deg);}
}
@keyframes gif-loading{
from{transform: rotate(360deg);}
to{transform: rotate(0deg);}
}
/*為了保證兼容性，清設置私有制前綴，總有些人懶得升級自己的瀏覽器。*/
設置完@keyframes之后，我們就要用animation屬性把我們的@keyframes動畫效果應用到我們的”圓環(huán)”上面了。這一步比較簡單，代碼如下：
/*animation應用效果*/
/*為了保證兼容性，清設置私有制前綴，總有些人懶得升級自己的瀏覽器。*/
div {
margin: 50px auto;
width: 4px;
height: 4px;
border-radius: 2px;
box-shadow: 0 -12px 0 3px #000,
0 12px 1px 1px #333,
-12px 0 2px 1px #333,
12px 0 0 1px #333,
-9px -9px 3px 1px #333,
9px -9px 0 2px #333,
-9px 9px 1px 1px #333,
9px 9px 0 1px #333;
-webkit-animation: gif-loading 2s linear 0s infinite;
-moz-animation: gif-loading 2s linear 0s infinite;
-o-animation: gif-loading 2s linear 0s infinite;
animation: gif-loading 2s linear 0s infinite;
}
/*為了保證兼容性，清設置私有制前綴，總有些人懶得升級自己的瀏覽器。*/
這下我們就得到了一個純CSS制作的loading效果了……↓↓↓↓↓↓
OK！大功告成~~ 奇怪怎么看起來這個圓環(huán)有點“方形”的感覺？算了……不管它了，就這吧…
