首先圓圈進度條是一直在旋轉的，旋轉我們可以利用的是css3的rotate(deg)實現乙個二維旋轉的css3屬性，作用是將指定元素旋轉指定的角度,正值表示順時針方向旋轉，負值表示逆時針防線旋轉，旋轉的角度範圍為(-360deg~360deg)。
一般的進度條的是長這樣的
這可以看成是乙個圓弧在一直旋轉，html中沒有圓形標籤，都是方形的，但可以通過設定border-radius將容器變為圓形，然後旋轉即可.
@keyframes loadto }
.loading{
width:120px;
height:120px;
position: absolute;
top:50px;
left: 50%;
margin-left: -60px;
/* 設定為圓形形狀
為了看到其中的一段旋轉的效果，這裡將其他邊的透明度設定為0.4，從而隱藏了其他的邊
*/ border-radius: 50%;
border-top: 15px solid rgb(255,255,255,1);
border-left: 15px solid rgb(255,255,255,0.4);
border-right: 15px solid rgb(255,255,255,0.4);
border-bottom: 15px solid rgb(255,255,255,0.4);
animation:load 2s infinite linear;
roate的三維實現樣式有a.旋轉
1.rotatex(deg) //繞x軸旋轉
2.rotatey(deg) //繞y軸旋轉
3. rotatez(deg) //繞z軸旋轉
b.平移
translate(a,b) //在x，y方向平移a,b畫素距離。利用translate(-50%,50%)可以實現居中。
translatex(a) //在x方向平移a的畫素距離。
translatey(a)//在y方向平移a的畫素距離。
translatez(a)//在z方向平移a的畫素距離。
在應用3d動畫使，必須在所在元素樣式中申明 transform-style: preserve-3d
其座標系圖如下所示
其中z的負方向為垂直指向螢幕的方向
效果展示
CSS3實現動態進度條
css3的線性漸變使製造動態進度條成為可能。現在就來一步一步講解如何建立動態進度條吧。以chrome瀏覽器webkit核心為例。目標進度條，背景是淡藍色，上面平鋪了一層傾斜的深藍色條狀矩形。我們可以這樣寫 box box 這裡用到了線性漸變 webkit linear gradient 逆時針傾斜的...
使用css3實現環形進度條
有詢問原始碼的盆友，整理了一下把原始碼鏈結放上吧！我是原始碼鏈結 進度條效果如下 整圓的效果處理會簡單些，不完整環實現起來細節多點。下邊是實現邏輯和過程。進度條組成 環形 兩種顏色進度條，當餘量少於50 時進度條顏色由綠色變為黃色。進度條結構由兩個疊加環形組成 上疊加環形展示剩餘量，深色 下疊加環形...
css3 製作圓環進度條
移動端做乙個 loadiing 載入的圖示，跟以往沿用的都不太一樣，是乙個圓環進度條，圓環進度條也就罷了，還得能用百分比控制。demo 剛開始寫這個圓環的時候是參照帖子上給出的css 代入，然後根據自己的需求改，發現圓環可以完美轉動了，但是好像沒法用百分比控制，所以放棄了隨便copy乙個現成的想法，...