最近在工作中需要做乙個圓圈倒計時，剛開始的想法是做個純數字的倒計時即可，可是需求覺得這個不太好看，想加個倒計時進度條。於是就有了接下來的分析過程...
我們知道css3可以很方便的畫圓，圓環，然後在加上乙個旋轉動畫不就可以實現了嗎？
於是先把圓環畫出來了
做到這裡問題又來了，如何讓紅色的圓環一點一點的消失呢？此處乙個圓環再怎麼旋轉終究是乙個圓環，
此時覺得乙個圓可能不夠，何不在畫乙個白色的半圓再旋轉呢？可是白色的半圓又如何一點一點的顯示呢?貌似又回到了問題的起點。
我們知道overflow：hidden;可以讓多餘的部分隱藏，如果在配合兩個半圓旋轉不就可以實現了嗎？
先畫兩個半圓試試
左半圓右半圓
如果都順時針旋轉45度再剛剛好拼在一起就是乙個完整的圓環
.right
.left
.circleprogress
.rightcircle
.leftcircle
此時當我們再旋轉的時候發現，圓環可以實現一點一點的消失了，但是當轉過乙個180度的時候這個半圓右出現了，此時我們可以用到前面的overflow:hidden;
css**如下
width: 160px;
height: 160px;
margin: 10px auto;
position: relative;
} width: 80px;
height: 160px;
position: absolute;
top:0;
overflow: hidden;
}.right
.left
.circleprogress
.rightcircle
.leftcircle
接下來用css3寫個旋轉動畫即可
.rightcircle
.leftcircle
@keyframes circleprogressload_right
50%,100%
}@keyframes circleprogressload_left
100%
}
目前這裡的倒計時動畫是動畫時間是6s，這裡可以根據需要自行修改，這裡的執行時間我在專案中是用js控制的，這樣可以根據後台下發的時間值來倒計時，非常方便。
css3 實現進度條
首先圓圈進度條是一直在旋轉的，旋轉我們可以利用的是css3的rotate deg 實現乙個二維旋轉的css3屬性，作用是將指定元素旋轉指定的角度,正值表示順時針方向旋轉，負值表示逆時針防線旋轉，旋轉的角度範圍為 360deg 360deg 一般的進度條的是長這樣的 這可以看成是乙個圓弧在一直旋轉，h...
CSS3實現動態進度條
css3的線性漸變使製造動態進度條成為可能。現在就來一步一步講解如何建立動態進度條吧。以chrome瀏覽器webkit核心為例。目標進度條，背景是淡藍色，上面平鋪了一層傾斜的深藍色條狀矩形。我們可以這樣寫 box box 這裡用到了線性漸變 webkit linear gradient 逆時針傾斜的...
css3 製作圓環進度條
移動端做乙個 loadiing 載入的圖示，跟以往沿用的都不太一樣，是乙個圓環進度條，圓環進度條也就罷了，還得能用百分比控制。demo 剛開始寫這個圓環的時候是參照帖子上給出的css 代入，然後根據自己的需求改，發現圓環可以完美轉動了，但是好像沒法用百分比控制，所以放棄了隨便copy乙個現成的想法，...