[分享]css3怎么让图片无限旋转动画

CSS3是一种非常强大的样式表语言，可以让我们创建各种炫酷的动画效果。其中，旋转动画是一种经典的动画效果，可以让页面更具生动性。那么，怎样使用CSS3让图片实现无限旋转呢？下面，就让我们一起学习一下吧...

CSS3是一种非常强大的样式表语言，可以让我们创建各种炫酷的动画效果。其中，旋转动画是一种经典的动画效果，可以让页面更具生动性。那么，怎样使用CSS3让图片实现无限旋转呢？下面，就让我们一起学习一下吧！

/* 首先，我们需要给图片设置一个初始状态 */ 

img {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: rotate 3s linear infinite;
}

/* 接下来，我们要创建动画关键帧 */ 

@keyframes rotate {
    0% {transform: translate(-50%, -50%) rotate(0deg);}
    100% {transform: translate(-50%, -50%) rotate(360deg);}
} 

上述代码中，我们使用了CSS3的transform属性来控制图片的位置和旋转角度。translate(-50%, -50%)可以让图片在垂直和水平方向上居中对齐，rotate(0deg)表示图片的初始旋转角度为0度。而在关键帧中，我们将图片的旋转角度由0度变化到360度，实现了旋转动画效果。最后声明了无限循环的动画，使图片能够无限地旋转下去。

通过这种方法，我们可以为网页添加各种旋转动画效果，让页面更加生动、有趣。希望大家可以通过不断学习和尝试，掌握更多CSS3动画效果的应用技巧。