[分享]css3动画自动旋转圆心

CSS3动画自动旋转圆心的实现方法如下：

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

@keyframes rotate {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}

这段代码中，我们创建了一个圆形元素.circle，并设置它的宽度、高度和背景色。border-radius属性设置为50%后，它就会变成一个圆形。

接着，我们将.circle元素的位置设置为相对定位，这样它的子元素就可以根据它的位置来进行定位。我们还设置了一个动画，名为rotate，持续时间为2秒，无限循环，缓动函数为linear。

在@keyframes规则中，我们定义了两个关键帧。第一个关键帧（0%）将圆形传递给了transform属性的rotate函数，角度为0度，表示初始状态。第二个关键帧（100%）将角度设置为360度，让圆形旋转一整个圆。

当我们将这段代码应用到HTML元素中时，它将自动旋转并绕着圆心旋转。如果需要改变圆心的位置，我们可以将.circle元素的左右位置和顶部位置属性设置为50%。

总之，使用CSS3动画可以轻松地实现自动旋转圆心效果，让我们的网页更加生动有趣。