css3实现环形进度条 |如何申请个博客 写css

.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;
}

以上是实现环形进度条的CSS代码，其中通过两个伪元素:before和:after来实现。

其中:before是整个圆环中进度的部分，通过clip属性来剪切显示它的一部分，transform: rotate(-45deg)是将其旋转45度，变为从左上方开始。

:after是圆环中进度结束的部分，clip属性也是剪切显示它的一部分，clip: rect(0, 50px, 100px, 0)，其中0代表上边界，50px代表右边界，100px代表下边界，0代表左边界。然后给它设置一个背景颜色，和环形进度条的主体颜色相同，这样看起来就像是一个没有进度的环形进度条了。

当大家想要让进度条动起来时，可以通过添加.active类来触发CSS3过渡效果。这时:before将会旋转45度，:after也将被填充上背景色来呈现出进度部分的效果。同时可使用JavaScript来获取百分比，再将其写入一段P标签中，随着进度的更新，这段文字也将发生变化。

80%

最后，结合HTML和CSS3，大家就可以实现一个简单而又实用的环形进度条了。