[分享]CSS中如何实现让一个圆自转

在CSS中，我们可以使用“transform”属性来实现让一个圆自转的效果，下面是实现的具体代码：

.circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: red;
    animation: rotate 2s linear infinite;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    
    to {
        transform: rotate(360deg);
    }
} 

上面的代码中，首先创建了一个class为“circle”的元素，宽高都为100px，边框半径为50%，背景色为红色。然后使用“animation”属性来设置动画效果，属性值包括“动画名称”、“持续时间”、“时间函数”和“重复次数”。其中“动画名称”为“rotate”，这个名称与下面的“@keyframes”关键字的后面相匹配。这表示让元素按照“rotate”的效果进行动画演示。持续时间为2s，即2秒。时间函数为“linear”，表示动画运动的速度是均匀的，不会加速或减速。重复次数为“infinite”，表示无限次。

最后，在“@keyframes”中定义了从0度到360度的旋转动画效果，从0度开始逐渐增加到360度，示意代码如下：

@keyframes rotate {
    from { 
        transform: rotate(0deg); 
    }
    
    to { 
        transform: rotate(360deg); 
    }
} 

这样，一个自转的圆就完成了。