兩種CSS3圓環進度條詳解

晚上睡覺之前，我抽了1個多小時，研究了一下圓環進度條，結合從網上查閱的資料，我終於掌握了兩種圓環的生成方法。

這次的效果就是單純的css3效果，也沒有寫具體的js，等以後有時間在好好整理一下吧~。

這種方法好處在於容易理解，只需要一層一層的巢狀，即可得到效果，但是實現起來較為繁瑣，html的結構也比較冗餘。

先看html結構：

<

div 
class
="circle-one"
>
<
div 
class
="circle-one-l"
>
<
div 
class
="circle-one-l-in"
>
div>
div>
<
div 
class
="circle-one-r"
>
<
div 
class
="circle-one-r-in"
>
div>
div>
div>

.circle-one-l

：用於控制左側的顯示範圍。

.circle-one-l-in

:用於控制只顯示半圓。

.circle-one-l-in:after

: 用於生成一條完整的圓，這裡的圓是通過邊框線的方式顯示出來的，所以對應的寬與高要進行一定的減去。

circle-one-r

：用於控制右側的顯示範圍。

在看css**

.circle-one.circle-one-l,.circle-one-l-in.circle-one-l-in.circle-one-l-in:after.circle-one-r,.circle-one-r-in.circle-one-r-in.circle-one-r-in:after@keyframes circle_one_l100%}

@keyframes circle_one_r100%}

使用overflow溢位隱藏的方式實現的圓環進度效果，其核心實現就是通過overflow分別劃分兩個顯示範圍，然後在每個顯示範圍的內部，再在其子標籤 -in 上通過使用overflow，來得到兩個半圓，後期，在通過旋轉這兩個半圓，便得到進度的效果了。

這種方法的好處在於節省html標籤結構，但是clip卻不怎麼好理解。

clip是一種css裁剪屬性，只能作用在絕對定位(absolute)的元素上，可以控制元素可顯示的範圍。

clip有四個屬性值，分別是top,right,bottom,left

格式：clip:rect(top,right,bottom,left)

可以形象的將clip:rect理解成乙個點，而它的四個值:top,right,bottom,left，根據值的大於小，分別對上、右、下、左四個方向進行擴張或收縮。

*其中如果某個值是顯示範圍的最大值，可以用auto表示

使用clip裁剪方式實現的圓環進度效果，其核心實現就是通過clip裁剪出左右兩個半圓，然後對半圓進行旋轉，拼接出完整的圓環進度效果：

先看html結構：

<

div 
class
="circle-two"
>
<
div 
class
="circle-two-l"
>
div>
<
div 
class
="circle-two-r"
>
div>
<
div 
class
="circle-two-mask"
>
div>
div>

circle-two-l 這個div是用於控制左邊顯示區域，因為裁剪區域是：clip:rect(0,100px,auto,0);

circle-two-l:after 這是乙個實心的黑色背景的圓形，但是通過裁剪區域只能顯示半圓

circle-two-r 這個div是用於控制右邊顯示區域，因為裁剪區域是：clip:rect(0,auto,auto,100px)

circle-two-r:after 這是乙個實心的黑色背景的圓形，但是通過裁剪區域只能顯示半圓

circle-two-mask 則是遮罩，它與背景色相同。

下面看看css：

.circle-two.circle-two-l.circle-two-l:after.circle-two-r.circle-two-r:after.circle-two-mask@keyframes circle_two_l100%}

@keyframes circle_two_r100%}

因此最終，分別通過控制旋轉左右兩個半圓，再結合 .circle-two-l ,  .circle-two-r clip控制的顯示範圍，便實現了進度的增加效果。

好了，結束，進被窩睡覺~明天繼續奮鬥，加油~

css3 製作圓環進度條

移動端做乙個 loadiing 載入的圖示，跟以往沿用的都不太一樣，是乙個圓環進度條，圓環進度條也就罷了，還得能用百分比控制。demo 剛開始寫這個圓環的時候是參照帖子上給出的css 代入，然後根據自己的需求改，發現圓環可以完美轉動了，但是好像沒法用百分比控制，所以放棄了隨便copy乙個現成的想法，...

css3 製作圓環進度條

移動端做乙個 loadiing 載入的圖示，跟以往沿用的都不太一樣，是乙個圓環進度條，圓環進度條也就罷了，還得能用百分比控制。demo 剛開始寫這個圓環的時候是參照帖子上給出的css 代入，然後根據自己的需求改，發現圓環可以完美轉動了，但是好像沒法用百分比控制，所以放棄了隨便copy乙個現成的想法，...

利用CSS3實現進度條的兩種姿勢詳解

效果圖如下 第一種姿勢如下 先上 對應css progress progress span keyframes load 100 上方的漸變色使用了css3中的 linear gradient linear gradient語法 linear gradient to left right top b...