css-圆弧旋转效果
css简易实现圆弧旋转
HTML
<div class="box">
<div class="content">
asd
</div>
<div class="box_border">
</div>
</div>
CSS
代码如下(示例):
.box {
width: 200px;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.content {
width: 180px;
height: 180px;
border-radius: 50%;
border: 5px solid rgba(103, 237, 255, 0.63);
display: flex;
align-items: center;
justify-content: center;
}
.box_border {
position: absolute;
width: 180px;
height: 180px;
border:5px solid;
border-radius: 50%;
border-color: #43aaff #ffffff00 #ffffff00 #ffffff00;
animation: fadenum 2500ms infinite linear;
}
@keyframes fadenum {
100% {
transform: rotate(360deg);
}
}
展示效果
总结
此css简易效果只是对标签边框做简易处理,不适用百分比效果展示;