CSS扇形進(jìn)度條可以讓我們在頁面中實(shí)現(xiàn)一個(gè)美觀而實(shí)用的進(jìn)度展示效果。下面讓我們來學(xué)習(xí)一下如何使用CSS實(shí)現(xiàn)扇形進(jìn)度條。

.progress {
width: 100px;
height: 100px;
border-radius: 50%;
background: #ddd;
position: relative;
}
.progress::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
clip: rect(0, 50px, 100px, 0);
background-color: #f76707;
transform-origin: center bottom;
transform: rotate(0deg);
}
.progress.completed::before {
animation: progress 2s ease-in-out;
}
@keyframes progress {
0% {
transform: rotate(0deg);
clip: rect(0, 100px, 100px, 0);
}
100% {
transform: rotate(180deg);
clip: rect(0, 50px, 100px, 0);
}
}

首先，我們創(chuàng)建一個(gè)進(jìn)度條容器，設(shè)置其寬高和圓角讓它成為一個(gè)圓形。然后，我們使用偽元素:before來繪制進(jìn)度條，將其放置在容器內(nèi)的最上層。

:before元素我們設(shè)置一個(gè)clip剪輯區(qū)域，使其只顯示其容器寬度的一半。然后我們使用transform-origin將其基準(zhǔn)點(diǎn)設(shè)置在其底部中心位置。讓它隨著進(jìn)度條轉(zhuǎn)動(dòng)渲染出圓弧形狀。

在progress類下，我們創(chuàng)建了一個(gè)animation動(dòng)畫屬性，設(shè)置2秒鐘內(nèi)完成，并在@keyframes中設(shè)置0-100%之間的動(dòng)畫效果。

最后，我們只需給容器添加.completed屬性來觸發(fā)進(jìn)度條的動(dòng)畫效果。完成的進(jìn)度條呈現(xiàn)半圓形狀態(tài)，進(jìn)度條沒有完成時(shí)呈現(xiàn)半圓形到圓形的過渡狀態(tài)。在修改元素寬高的同時(shí)，偽元素內(nèi)clip區(qū)域和transform動(dòng)作都應(yīng)做出相應(yīng)調(diào)整。

簡單以上，一個(gè)漂亮的進(jìn)度條就呈現(xiàn)在我們眼前了。是不是十分簡單易懂呢？