css3画圆弧进度条 |css 半颗星效果

.circle {
width: 200px;
height: 200px;
border-radius: 50%;
border: 10px solid #eee;
position: relative;
overflow: hidden; /* 将溢出部分隐藏 */
}
.mask {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
transform-origin: 50% 50%;
transform: rotate(-90deg);
}
.fill {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #ffcb00;
transform-origin: 50% 50%;
transform: rotate(0deg);
}
.mask .fill {
border-top-right-radius: 100px;
border-bottom-right-radius: 100px;
}

首先，大家创建了一个圆形容器，用border-radius属性将其变成圆形。然后，大家将其overflow属性设置为hidden，以隐藏溢出部分。

接着，大家创建了一个用于遮罩的.mask类，它的position属性设置为absolute，将其覆盖在圆形容器上。它的transform-origin属性设置为50% 50%，表示旋转的中心点在容器中间。大家将其使用transform属性沿着-90度的角度进行了旋转，使它变成了一个扇形遮罩。

然后，大家创建了一个.fill类，它是表示进度的元素，也是一个position为absolute的元素，且它与.mask元素完全重合。它的背景颜色设为#ffcb00，表示进度条的填充色。大家将其transform-origin属性设置为50% 50%，表示旋转的中心点在容器中间。它的初始角度为0度。

最后，大家通过.mask .fill选择器将.fill元素的右边框设置为圆角。这是为了使进度条看起来更自然。

大家可以通过JavaScript脚本控制.fill元素的transform属性来改变进度条的进度。具体操作是：根据所需的进度，计算出.fill元素的transform属性的值，然后设置它即可。