如何为输入框（INPUT）内右侧的图片实现可控制速度的旋转动画？

嘿，我完全懂你的烦恼！之前用背景图给input加右侧图标，用动图虽然能转，但没法控制速度；想用伪元素做动画吧，偏偏input又不支持::after/::before，确实挺棘手的。不过咱们可以换个思路，用容器包裹input的方式来绕开这个限制，具体实现方法如下：

核心思路 #

因为input本身不能生成伪元素，我们给它套一个相对定位的容器，然后在容器上创建伪元素，把旋转图标放在这个伪元素里，再通过绝对定位让它刚好落在input的右侧边缘，最后给伪元素加上自定义速度的旋转动画就搞定了。

具体代码示例 #

HTML结构

<div class="input-container">
  <input type="text" placeholder="输入内容..." />
</div>

CSS样式

/* 容器设置相对定位，作为伪元素的定位基准 */
.input-container {
  position: relative;
  display: inline-block;
}

/* 基础input样式，留出右侧空间给旋转图标 */
.input-container input {
  padding-right: 30px; /* 根据图标大小调整，避免输入内容被挡住 */
  height: 32px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding-left: 8px;
}

/* 容器的伪元素，用来放旋转图标 */
.input-container.busy::after {
  content: '';
  position: absolute;
  right: 8px; /* 调整图标和input右侧的距离 */
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background-image: url('你的图标路径.png'); /* 替换成你的PNG图标 */
  background-size: cover;
  animation: rotate 1.5s linear infinite; /* 这里的1.5s就是你要控制的旋转速度 */
}

/* 定义旋转动画 */
@keyframes rotate {
  from {
    transform: translateY(-50%) rotate(0deg);
  }
  to {
    transform: translateY(-50%) rotate(360deg);
  }
}

使用方法 #

当你需要让输入框显示旋转动画时，只需要给容器加上busy类就行：

// 示例：给容器添加busy类启动动画
document.querySelector('.input-container').classList.add('busy');

// 停止动画的话移除类
document.querySelector('.input-container').classList.remove('busy');

补充说明 #

• 如果你不想用容器，也可以单独加一个<span>元素放在input旁边，同样设置绝对定位和动画效果，但用容器的方式结构更整洁，也更易维护。
• 动画的速度可以通过animation属性里的时间值（比如上面的1.5s）来调整，数值越小旋转越快，越大则越慢。

备注：内容来源于stack exchange，提问作者Konrad Viltersten