CSS的半圓進度條是一種常見的網(wǎng)頁效果，可以為用戶提供直觀的視覺反饋。本文將介紹如何使用CSS創(chuàng)建一個半圓進度條。

<div class="progress">
<div class="progress-bar"></div>
</div>
.progress {
width: 200px;
height: 100px;
position: relative;
overflow: hidden;
margin: 50px auto;
border-radius: 100px 100px 0 0;
background: #ddd;
box-shadow: inset 0 -1px 3px rgba(0,0,0,.2);
}
.progress-bar {
width: 200px;
height: 200px;
position: absolute;
bottom: -100px;
border-radius: 100%;
background: #3498db;
animation: rotate 5s linear infinite;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(180deg);
}
}

首先我們使用一個div元素創(chuàng)建一個進度條容器，并且將它的position屬性設(shè)置為relative，水平居中，并將overflow屬性設(shè)置為hidden以隱藏進度條的超出部分。

接下來，我們在容器中創(chuàng)建一個進度條條形元素，并將它的position屬性設(shè)置為absolute以定位在容器底部，并將bottom屬性設(shè)置為-100px以將其推到容器底部的外面。我們還將border-radius屬性設(shè)置為100%以將它變成一個圓形。然后我們設(shè)置進度條的背景顏色為#3498db。

最后，我們使用CSS動畫$keyframes創(chuàng)建一個rotate，在5秒的時間內(nèi)將進度條從0°旋轉(zhuǎn)到180°。這樣進度條就成為了一個半圓形進度條，顯示進度的程度。

在使用CSS半圓進度條時，注意將進度條條形元素的高度設(shè)置為容器寬度的兩倍，并將bottom屬性設(shè)置為負(fù)的容器寬度一半，以保證半圓進度條的外弧線正好與容器上邊界對齊。