css3实现环形进度条

CSS3可以实现很多很酷炫的效果，其中实现环形进度条就是一个很好的例子。

.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，我们就可以实现一个简单而又实用的环形进度条了。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！