css控制圆旋转 |不重复css

.circle {
width: 100px;
height: 100px;
background-color: red;
border-radius: 50%;
animation: rotate 2s linear infinite;
transform-origin: center;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

在上面的代码中，大家首先创建了一个半径为50px的圆，并设置其背景色为红色。然后，大家通过animation属性定义了一个名为rotate的旋转动画，该动画会在2秒内不断地执行。同时，大家还设置了transform-origin的值为center，这表示大家想要以圆的中心点为旋转中心点。

最后，在大家的rotate动画中，大家通过transform属性定义了大家想要绕圆心旋转的角度。在0%时刻，大家让圆停留在初始状态，旋转角度为0度；而在100%时刻，大家让圆绕中心360度旋转，达到了完整的一圈。

使用以上代码，大家就可以很轻松地实现一个旋转的圆形元素了。同时，如果大家想要调整旋转的速度或旋转的方向，只需要修改animation和transform属性的相应值即可。