css3 动画自转 |css 输入框按钮

/* 首先，大家需要定义一个要旋转的元素 */
.rotate {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #f00;
}
/* 接着，大家需要定义一个动画 */
@keyframes rotate360 {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* 最后，将动画应用到元素上 */
.rotate {
animation: 4s rotate360 linear infinite;
}

以上代码的含义如下：

首先，大家定义了一个要旋转的元素，它是一个宽高均为100px的圆形，并设置了背景色为红色。

接着，大家定义了一个名为“rotate360”的动画。该动画由两个关键帧，一个是初始状态（即起始点），另一个是结束状态（即顺时针旋转360度后的状态）。在初始状态下，元素的旋转角度为0度。在结束状态下，元素旋转角度为360度，即一圈，实现了自转的效果。

最后，大家将动画应用到元素上，让它旋转4秒钟（观察效果时也可以根据自己的需要进行调整），采用“linear”缓动函数，使旋转速度保持匀速，同时循环无限次。这就完成了整个动画自转的实现。

总结来说，实现CSS3动画自转非常简单，大家只需要定义一个要旋转的元素，再定义一个动画，最后将动画应用到元素上即可。用CSS3实现自转效果不仅简单易学，而且更加美观，因此在前端开发中应用也非常广泛。