css圆内部旋转填满 |css3中合并单元格格式

.circle {
position: relative;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #ccc;
}
.circle::before {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
border: 10px solid #f00;
box-sizing: border-box;
animation: rotate 2s linear infinite;
}
@keyframes rotate {
from {
transform: rotate(0deg);
border-color: #f00;
}
to {
transform: rotate(360deg);
border-color: #0f0;
}
}

代码中大家使用了一个普通的圆形(.circle)作为容器，在容器中使用CSS伪元素(before)表示从内部旋转填满的效果。border-radius: 50% 将容器设置为圆形，同时before元素也添加这项属性表示继承容器的圆形形状。border: 10px solid #f00 设置边框为10px，颜色为红色以突出边框效果。box-sizing: border-box 则表示计算盒模型高度包括边框。使用animation属性绑定旋转动画，从0度转到360度，动画持续时间为2s，线性过渡，无限循环。

通过上述代码，大家就可以快速实现CSS圆内部旋转填满的效果，增加网页的交互性和美观度。