我們國家的人數(shù)眾多横侦，導(dǎo)致的結(jié)果就是不管去干啥都要排隊挥萌，都要等待。當(dāng)然這是理想狀態(tài)枉侧，現(xiàn)實中的情況卻是大家一擁而上引瀑，根本不管什么排隊不排隊的。就算勉強排成了隊形榨馁，也總是有些人插隊憨栽，插隊不是某一類人，而是全員翼虫，從年邁的老人到高素質(zhì)的大學(xué)生屑柔，從公司白領(lǐng)到抱孩子的女人≌浣＃總之锯蛀，插隊已經(jīng)成為全全民參與的一項運動。當(dāng)我遇見這種情況的時候次慢，總是會無奈的嘆口氣旁涤，然后悄然的跟著插隊的人站在他的后面，從容不迫的完成我的“插隊”之舉迫像。
在面臨排隊的時候劈愚，那可真是眾生相十足啊，有人看書闻妓，有人看手機菌羽，有人和旁邊的人閑聊，有人打電話由缆，有人看天空注祖，有人雙眼盯著那些插隊的人嘴里罵罵咧咧。都是無聊鬧的……那么我們在頁面中也會出現(xiàn)類似的忙碌情況均唉，當(dāng)有大量圖片加載或者網(wǎng)速沒有足夠快是晨。訪問者望著一片白的瀏覽器，估計沒有人能堅持幾秒鐘直接就關(guān)閉了舔箭。這種情況不是我們網(wǎng)頁制作者愿意見到的罩缴。可是我們管不了分配帶寬层扶，也管不了網(wǎng)站編輯箫章。怎么辦？
我們能做的就是通過自己已經(jīng)掌握的知識來為遇見的新問題來提供解決方案镜会。添加一個loading效果的圖標是一個很好的解決方案檬寂，在CSS3之前都會用到一張小小的GIF來實現(xiàn)loading的效果。
而在CSS3出現(xiàn)了transform:rotate();之后我們就可以用一張體積較小的JPG圖片來代替體積較大的GIF圖片戳表，甚至圖形也直接用CSS來生成桶至，例如用《border一點都不簡單》一文中的border來生成三角形;也可以用CSS中十分生僻的屬性Clip-Path:polygon();來做更復(fù)雜的圖形拿诸。
先來看看瀏覽器對transform:rotate();的支持情況。
瀏覽器對CSS屬性transform的支持情況
還不錯~圖上有黃色小點的地方就是說需要加私有前綴塞茅。主流瀏覽器的主要版本都支持這哥們亩码，IE8及之前版本的IE不支持，IE9需要添加-ms-私有前綴野瘦。不過IE9只能支持transform的2D轉(zhuǎn)換描沟，對于3D轉(zhuǎn)換-ms-transform:rotate3d();會完全無感。
transform:rotate();的括號里面要填寫的是需要旋轉(zhuǎn)的度數(shù)鞭光。例如90deg表述的就是90°吏廉。有了旋轉(zhuǎn)了，還必須配合CSS中高級裝逼利器animation和@keyframes來創(chuàng)建動畫惰许。關(guān)于它們的用法席覆，后續(xù)的文章介紹基礎(chǔ)CSS的時候，我會詳細說明汹买，這里只是說它的作用是做動畫的佩伤。看示例DEMO就會對這兩貨有一定的感性了解晦毙。
很有意思是吧生巡！讓animation控制圖形元素進行transform:rotate();就能實現(xiàn)loading效果。這是基本技術(shù)原理见妒。用CSS制作簡單的圖形有幾種方法孤荣，除前文舉例的border制作三角形之外還有用Clip-Path:polygon();制作較為復(fù)雜的多邊形，不過這哥們太生僻了而且對瀏覽器支持不廣泛须揣。這里我決定用box-shadow屬性和border-radius屬性來制作由小圈圈組成的圓環(huán)盐股。
通過border-radius來設(shè)置一個圓形，然后通過box-shadow的多重陰影來設(shè)置“環(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來設(shè)置我們的圖形的旋轉(zhuǎn)效果。
/*@keyframes設(shè)置*/
/*為了保證兼容性劲赠，清設(shè)置私有制前綴涛目，總有些人懶得升級自己的瀏覽器。*/
@-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);}
}
/*為了保證兼容性凛澎，清設(shè)置私有制前綴，總有些人懶得升級自己的瀏覽器估蹄。*/
設(shè)置完@keyframes之后塑煎，我們就要用animation屬性把我們的@keyframes動畫效果應(yīng)用到我們的”圓環(huán)”上面了。這一步比較簡單臭蚁，代碼如下：
/*animation應(yīng)用效果*/
/*為了保證兼容性最铁，清設(shè)置私有制前綴讯赏，總有些人懶得升級自己的瀏覽器。*/
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;
}
/*為了保證兼容性冷尉，清設(shè)置私有制前綴漱挎，總有些人懶得升級自己的瀏覽器。*/
這下我們就得到了一個純CSS制作的loading效果了……↓↓↓↓↓↓
OK雀哨！大功告成~~ 奇怪怎么看起來這個圓環(huán)有點“方形”的感覺磕谅？算了……不管它了，就這吧…
