如何实现仅颜色平滑无限旋转的CSS动画（文本保持静止）

你不需要旋转整个body元素，只需单独让背景渐变动起来就能实现需求，页面内容可以完全保持静止。这里提供两种实用方案：

方案一：直接动画渐变的起始角度 #

通过修改conic-gradient的from参数实现颜色旋转，逻辑简单直接：

body {
  background: conic-gradient(from 0deg, #fff, #000);
  animation: gradientSpin 4s linear infinite;
}

@keyframes gradientSpin {
  to {
    background: conic-gradient(from 360deg, #fff, #000);
  }
}

方案二：用伪元素做独立背景层 #

如果需要更复杂的渐变效果，或者追求更好的动画性能，推荐用伪元素单独承载背景，再旋转这个伪元素：

body {
  margin: 0;
  min-height: 100vh;
  position: relative;
  z-index: 1; /* 确保内容在背景上方 */
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: conic-gradient(#fff, #000);
  z-index: -1; /* 把背景层放在内容下方 */
  animation: spin 4s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

两种方案都能实现背景颜色的平滑无限旋转，且页面文本完全静止。方案二的性能更优，因为transform动画属于浏览器的硬件加速范畴，适合复杂场景。

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