CSS3可以實(shí)現(xiàn)很多很酷炫的效果，其中實(shí)現(xiàn)環(huán)形進(jìn)度條就是一個(gè)很好的例子。

.circular-progress {
position: relative;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #eee;
}
.circular-progress::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
clip: rect(0, 50px, 100px, 0);
background-color: #2962FF;
transform: rotate(-45deg);
}
.circular-progress::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
clip: rect(0, 50px, 100px, 0);
background-color: #eee;
}
.circular-progress.active::after {
background-color: #2962FF;
transform: rotate(45deg);
transition: all .5s ease;
}
.circular-progress.active .circular-progress__pct {
color: #2962FF;
transition: all .5s ease;
}

以上是實(shí)現(xiàn)環(huán)形進(jìn)度條的CSS代碼，其中通過兩個(gè)偽元素:before和:after來實(shí)現(xiàn)。

其中:before是整個(gè)圓環(huán)中進(jìn)度的部分，通過clip屬性來剪切顯示它的一部分，transform: rotate(-45deg)是將其旋轉(zhuǎn)45度，變?yōu)閺淖笊戏介_始。

:after是圓環(huán)中進(jìn)度結(jié)束的部分，clip屬性也是剪切顯示它的一部分，clip: rect(0, 50px, 100px, 0)，其中0代表上邊界，50px代表右邊界，100px代表下邊界，0代表左邊界。然后給它設(shè)置一個(gè)背景顏色，和環(huán)形進(jìn)度條的主體顏色相同，這樣看起來就像是一個(gè)沒有進(jìn)度的環(huán)形進(jìn)度條了。

當(dāng)我們想要讓進(jìn)度條動(dòng)起來時(shí)，可以通過添加.active類來觸發(fā)CSS3過渡效果。這時(shí):before將會(huì)旋轉(zhuǎn)45度，:after也將被填充上背景色來呈現(xiàn)出進(jìn)度部分的效果。同時(shí)可使用JavaScript來獲取百分比，再將其寫入一段P標(biāo)簽中，隨著進(jìn)度的更新，這段文字也將發(fā)生變化。

80%

最后，結(jié)合HTML和CSS3，我們就可以實(shí)現(xiàn)一個(gè)簡(jiǎn)單而又實(shí)用的環(huán)形進(jìn)度條了。