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

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

?

第一種：通過overflow溢出隱藏的方式：

這種方法好處在于容易理解，只需要一層一層的嵌套，即可得到效果，但是實現起來較為繁瑣，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{width: 200px;height: 200px;position:relative;margin:50px auto;overflow:hidden;}.circle-one-l,.circle-one-l-in{width: 100px;height: 200px;position:absolute;left:0px;top:0px;overflow:hidden;}.circle-one-l-in{transform-origin:100% 50%;transform:rotate(-180deg);animation:circle_one_l linear 2s forwards;}.circle-one-l-in:after{content:' ';position:absolute;left:0;top:0;border-radius: 50%;border:10px solid #000;width: 180px;height: 180px;}.circle-one-r,.circle-one-r-in{width:100px;height:200px;position:absolute;right:0px;top:0px;overflow:hidden;}.circle-one-r-in{transform:rotate(-180deg);transform-origin:0% 50%;animation:circle_one_r linear 2s 2s forwards;}.circle-one-r-in:after{content:' ';position:absolute;left:-100px;top:0;border-radius: 50%;border:10px solid #000;width: 180px;height: 180px;}@keyframes circle_one_l{0%{transform:rotate(-180deg);}100%{transform:rotate(0deg);}}@keyframes circle_one_r{0%{transform:rotate(-180deg);}100%{transform:rotate(0deg);}}

?

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

?

第二種：通過使用clip:rect進行裁剪的方法：

這種方法的好處在于節省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{width: 200px;height: 200px;position:relative;margin:50px auto;}.circle-two-l{width: 200px;height: 200px;position:absolute;left:0;top:0;clip:rect(0,100px,auto,0);}.circle-two-l:after{content:' ';background:#000;width:200px;height:200px;border-radius:50%;position:absolute;left:0;top:0;clip:rect(0,100px,auto,0);transform:rotate(-180deg);animation:circle_two_l linear 2s forwards;}.circle-two-r{width:200px;height: 200px;position: absolute;left:0;top:0;clip:rect(0,auto,auto,100px);}.circle-two-r:after{content:' ';background:#000;width:200px;height:200px;border-radius:50%;position:absolute;left:0;top:0;clip:rect(0,auto,auto,100px);transform:rotate(-180deg);animation:circle_two_r linear 2s 2s forwards;}.circle-two-mask{width: 180px;height: 180px;background:#fff;border-radius:50%;position:absolute;left:50%;top:50%;margin-top:-90px;margin-left:-90px;}@keyframes circle_two_l{0%{transform:rotate(-180deg);}100%{transform:rotate(0deg);}}@keyframes circle_two_r{0%{transform:rotate(-180deg);}100%{transform:rotate(0deg);}}

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

-----------------------------------

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

轉載于:https://www.cnblogs.com/HCJJ/p/5309102.html

總結

以上是生活随笔為你收集整理的两种CSS3圆环进度条详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。