一、HTML部分
<div class="box">
<span>0%</span>
</div>
其中span中内容为活数据
二、css部分
1.自定义动画部分
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
2.css部分
.box {
position: relative;
//居中效果,可删除
margin: 50px auto;
//宽度、高度(可自行修改)
width: 200px;
height: 200px;
//圆球效果以及边框
border-radius: 50%;
border: 1px solid black;
//将伪类元素的移除部分隐藏
overflow: hidden;
//文字效果(可自行修改)
text-align: center;
line-height: 200px;
color: green;
}
//通过伪类元素实现效果
.box::after {
//防止伪类元素覆盖box中的文字
z-index: -1;
//动画效果
animation: rotate 3s linear;
animation-iteration-count: infinite;
content: '';
left: -50px;
display: block;
position: absolute;
border-radius: 110px;
//top确定进度位置,根据box的高度进行修改
top: 220px;
//(以下可自行修改)
width: 300px;
height: 300px;
background-color: skyblue;
}