css3让园旋转起来 |css hover背景图片

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

以上是一个简单而又实用的CSS代码，其中circle类表示圆形，width与height代表宽度和高度，border-radius代表圆角半径，background-color代表背景颜色。而animation则代表动画效果，包括动画名称、持续时间、循环次数和动画速度。

接下来，大家还需要使用@keyframes来定义旋转效果。from代表起始状态，to代表结束状态，transform:rotate则代表旋转效果。当前代码中，大家定义了从0度旋转到360度旋转。

最终，大家将circle类应用到HTML元素上，例如div标签。

这时候，一只红色的圆形就会在页面上不停地旋转起来了。

采用CSS3动画技术，制作出炫酷的动画效果已经不是难事了。相信大家可以通过学习，开发出更加令人惊艳的CSS3动画效果，让页面呈现更加绚丽多彩的效果。