半圓環(huán)是指一個(gè)由半圓和一段弧線組成的圖形，通常用于展示進(jìn)度條、指示器等功能。在CSS中，我們可以使用一些技巧來(lái)實(shí)現(xiàn)半圓環(huán)的效果。
// 設(shè)置半圓環(huán)的容器div樣式
.circle {
width: 200px;
height: 100px;
border-radius: 100px;
border: 10px solid #ccc;
position: relative;
overflow: hidden;
}
// 設(shè)置半圓環(huán)的半圓部分樣式
.circle:before {
content:'';
width: 100%;
height: 100%;
background: #ccc;
border-radius: 100px 100px 0 0;
position: absolute;
top: -50px;
left: 0;
}
// 設(shè)置半圓環(huán)的弧線部分樣式
.circle:after {
content:'';
width: 100%;
height: 100%;
background: #f00;
border-radius: 0 0 100px 100px;
position: absolute;
bottom: -60px;
left: 0;
transform-origin: bottom center;
transform: rotate(0deg);
}
// 使用JS動(dòng)態(tài)設(shè)置弧線部分的旋轉(zhuǎn)角度
var progress = 50; // 假設(shè)進(jìn)度為50%
var angle = progress / 100 * 180;
document.querySelector('.circle:after').style.transform = 'rotate(' + angle + 'deg)';上面的代碼中，我們首先創(chuàng)建了一個(gè)寬度為200px、高度為100px的
元素，并設(shè)置它的圓角度數(shù)為100px，形成了一個(gè)圓形。然后我們使用:after偽類和transform屬性創(chuàng)建了一個(gè)弧線，并在底部定位。最后，使用JavaScript動(dòng)態(tài)地修改弧線部分的旋轉(zhuǎn)角度，使其呈現(xiàn)出不同的進(jìn)度。
通過(guò)這種方式，我們可以輕松地制作出各種半圓環(huán)效果，并且還可以使用CSS動(dòng)畫來(lái)實(shí)現(xiàn)更加生動(dòng)、炫酷的效果。