如何使用CSS实现包含全部HTML颜色的渐变背景动画

你原有代码的逻辑是通过超大背景尺寸+位移动画实现渐变滚动，只需要替换渐变的色标序列、补全动画定义就能覆盖全部HTML可见色域：

方案1：纯CSS背景位移动画（兼容性最优） #

• 原理：在渐变中加入覆盖全色相的HSL色标，沿用你原有的背景滚动逻辑，兼容所有支持CSS3的浏览器
• 完整实现代码：

/* 你的容器样式 */
.target-container {
  /* 渐变加入全色相色标，覆盖高饱和全色域，可自行添加不同亮度/饱和度的色标扩展色域 */
  background: linear-gradient(57deg, 
    hsl(0, 100%, 50%), /* 红 */
    hsl(30, 100%, 50%), /* 橙 */
    hsl(60, 100%, 50%), /* 黄 */
    hsl(90, 100%, 50%), /* 黄绿 */
    hsl(120, 100%, 50%), /* 绿 */
    hsl(180, 100%, 50%), /* 青 */
    hsl(210, 100%, 50%), /* 蓝 */
    hsl(270, 100%, 50%), /* 紫 */
    hsl(300, 100%, 50%), /* 粉 */
    hsl(330, 100%, 50%), /* 玫红 */
    hsl(360, 100%, 50%) /* 回到红色做闭环，避免过渡断层 */
  );
  background-size: 1000% 1000%;
  -webkit-animation: AnimationName 30s ease infinite;
  -moz-animation: AnimationName 30s ease infinite;
  animation: AnimationName 30s ease infinite;
  height: 140px;
  border-bottom: none;
}

/* 补全你原有代码缺失的动画定义 */
@-webkit-keyframes AnimationName {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@-moz-keyframes AnimationName {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes AnimationName {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

方案2：自定义属性动态色相动画（过渡更丝滑） #

• 原理：通过CSS @property注册可动画的色相变量，直接动态修改渐变的整体色相，没有背景移动的生硬感，过渡完全流畅
• 完整实现代码：

/* 先注册可动画的自定义色相属性 */
@property --hue {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

.target-container {
  background: linear-gradient(57deg,
    hsl(var(--hue), 100%, 50%),
    hsl(calc(var(--hue) + 60), 80%, 60%),
    hsl(calc(var(--hue) + 120), 80%, 40%),
    hsl(calc(var(--hue) + 180), 100%, 50%),
    hsl(calc(var(--hue) + 240), 80%, 60%),
    hsl(calc(var(--hue) + 300), 80%, 40%),
    hsl(calc(var(--hue) + 360), 100%, 50%)
  );
  /* 直接动画色相值实现全色域过渡 */
  animation: hueShift 30s linear infinite;
  height: 140px;
  border-bottom: none;
}

@keyframes hueShift {
  0% { --hue: 0; }
  100% { --hue: 360; }
}

• 注意：该方案兼容Chrome 88+、Edge 88+、Safari 16.4+，需要兼容低版本浏览器请优先选择方案1。

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