如何用纯CSS实现线性渐变旋转动画（多浏览器兼容）

当然可以实现，而且不需要逐帧定义关键帧，用伪元素+背景渐变+旋转动画的方案就能满足需求，兼容性覆盖绝大多数现代浏览器及IE10+，完全不需要依赖@property特性。

核心思路 #

通过伪元素模拟渐变边框：

• 父元素设置内边距（作为边框宽度）并裁剪溢出内容，内部内容容器覆盖中间区域，只露出伪元素的边缘部分作为边框。
• 给伪元素设置宽高为父元素的200%，添加循环旋转动画，让渐变背景环绕边框流动。

完整代码示例 #

<div class="gradient-border-box">
  <div class="box-content">渐变边框旋转效果</div>
</div>

.gradient-border-box {
  position: relative;
  width: 240px;
  height: 160px;
  padding: 3px; /* 控制边框宽度 */
  border-radius: 10px; /* 可选：圆角边框 */
  overflow: hidden;
}

.gradient-border-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  /* 自定义渐变颜色，首尾颜色一致保证动画衔接无缝 */
  background: linear-gradient(
    45deg,
    #ff6b6b,
    #feca57,
    #48dbfb,
    #a55eea,
    #ff6b6b
  );
  animation: borderRotate 3s linear infinite;
}

.box-content {
  position: relative; /* 确保内容在伪元素上层 */
  width: 100%;
  height: 100%;
  background: #fff; /* 覆盖伪元素中间区域，显示内容背景 */
  border-radius: 8px; /* 与父元素圆角匹配，减去边框宽度的一半 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  box-sizing: border-box;
}

@keyframes borderRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

方案优势 #

1. 无需逐帧关键帧：通过连续的旋转动画实现流畅效果，代码更简洁易维护。
2. 兼容性好：仅使用CSS基础特性（伪元素、渐变、旋转动画），兼容IE10及以上所有现代浏览器。
3. 灵活可调：只需修改padding（边框宽度）、渐变颜色、动画时长等参数，就能快速调整效果。
4. 无布局干扰：伪元素绝对定位，不会影响页面其他元素的布局。

注意事项 #

• 伪元素设置200%宽高是为了避免旋转时边缘出现空白，确保渐变始终覆盖边框区域。
• 渐变首尾颜色需保持一致，否则旋转到终点时会出现颜色跳变。
• 如果不需要圆角边框，直接移除所有border-radius属性即可。

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