如何在HTML中实现图片循环旋转效果？求简便实现方法

用CSS动画就能轻松搞定，不需要JavaScript，步骤如下：

1. 补全并优化HTML结构 #

先把img标签补全，给它加个类名方便绑定样式：

<img src="https://google.com/favicon.ico" class="rotate-img" alt="旋转图标">

2. 添加CSS旋转动画 #

通过@keyframes定义旋转逻辑，再给图片应用这个动画：

/* 定义旋转动画的关键帧 */
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 给图片绑定动画 */
.rotate-img {
  /* 依次为：动画名称、单次旋转时长、速度曲线、循环次数 */
  animation: rotate 10s linear infinite;
}

参数调整说明 #

• 10s：控制单次旋转的时长，数值越小旋转速度越快，可按需修改
• linear：保持旋转全程匀速，避免快慢变化
• infinite：设置动画无限循环，实现持续旋转效果

这样图片就会以匀速无限循环旋转，纯CSS实现，是最简便的方案。

内容的提问来源于stack exchange，提问作者CharveCompany