css控制图片循环转圈代码

CSS本身不支持图片的循环旋转动画，但是可以通过结合HTML和CSS实现。以下是一个简单的例子，展示如何使用CSS keyframes和animation属性来实现图片循环旋转的效果：

HTML代码:

<div class="rotate-container">
  <img src="path-to-your-image.jpg" alt="Rotating Image" class="rotating-image">
</div>

CSS代码：

.rotate-container {
  width: 200px; /* 设置容器宽度 */
  height: 200px; /* 设置容器高度 */
  position: relative; /* 设置定位 */
}
 
.rotating-image {
  width: 100%; /* 设置图片宽度 */
  height: auto; /* 图片高度自适应 */
  animation: rotate 5s linear infinite; /* 应用动画 */
}
 
@keyframes rotate {
  from {
    transform: rotate(0deg); /* 开始旋转 */
  }
  to {
    transform: rotate(360deg); /* 结束旋转 */
  }
}

扫描二维码手机查看该文章