网站背景多色循环切换动画实现技术求助

根据你的需求，下面提供两种可行方案，都能匹配你原有的动画节奏，实现9次不同颜色的背景切换：

方案一：纯CSS静态实现 #

把整个动画周期拆分为9个相同阶段，每个阶段复刻你原有@keyframes的进入-保持-退出逻辑，每个阶段使用不同的径向渐变颜色。这里假设单次切换对应2s时长，总动画时长设为18s，可根据你的另一动画节奏调整：

@keyframes background-color-cycle {
  /* 默认背景色节点：初始、每个阶段结束后、最终状态 */
  0%, 11.11%, 22.22%, 33.33%, 44.44%, 55.55%, 66.66%, 77.77%, 88.88%, 100% {
    background: #dfdfdf;
  }

  /* 第1次切换：进入+保持 */
  3.33% { background: radial-gradient(rgba(143, 50, 224, 0.6), #dfdfdf); }
  7.77% { background: radial-gradient(rgba(143, 50, 224, 0.6), #dfdfdf); }

  /* 第2次切换：进入+保持 */
  14.44% { background: radial-gradient(rgba(224, 50, 143, 0.6), #dfdfdf); }
  18.88% { background: radial-gradient(rgba(224, 50, 143, 0.6), #dfdfdf); }

  /* 第3次切换 */
  25.55% { background: radial-gradient(rgba(50, 224, 143, 0.6), #dfdfdf); }
  29.99% { background: radial-gradient(rgba(50, 224, 143, 0.6), #dfdfdf); }

  /* 第4次切换 */
  36.66% { background: radial-gradient(rgba(224, 143, 50, 0.6), #dfdfdf); }
  41.10% { background: radial-gradient(rgba(224, 143, 50, 0.6), #dfdfdf); }

  /* 第5次切换 */
  47.77% { background: radial-gradient(rgba(50, 143, 224, 0.6), #dfdfdf); }
  52.21% { background: radial-gradient(rgba(50, 143, 224, 0.6), #dfdfdf); }

  /* 第6次切换 */
  58.88% { background: radial-gradient(rgba(143, 224, 50, 0.6), #dfdfdf); }
  63.32% { background: radial-gradient(rgba(143, 224, 50, 0.6), #dfdfdf); }

  /* 第7次切换 */
  69.99% { background: radial-gradient(rgba(200, 50, 50, 0.6), #dfdfdf); }
  74.43% { background: radial-gradient(rgba(200, 50, 50, 0.6), #dfdfdf); }

  /* 第8次切换 */
  81.10% { background: radial-gradient(rgba(50, 200, 50, 0.6), #dfdfdf); }
  85.54% { background: radial-gradient(rgba(50, 200, 50, 0.6), #dfdfdf); }

  /* 第9次切换 */
  92.21% { background: radial-gradient(rgba(50, 50, 200, 0.6), #dfdfdf); }
  96.65% { background: radial-gradient(rgba(50, 50, 200, 0.6), #dfdfdf); }
}

/* 应用动画到目标元素 */
.target-element {
  animation: background-color-cycle 18s forwards; /* forwards保持最终默认状态 */
}

说明 #

• 百分比计算逻辑：总动画分为9份（每份≈11.11%），每份内按30%进入+40%保持+30%退出的比例复刻你原有的动画节奏。
• 可直接替换颜色值为你需要的9种颜色，调整18s来匹配另一动画的总时长。

方案二：JS + CSS变量灵活实现 #

如果需要动态修改颜色、重复播放等灵活控制，用CSS变量配合JS触发单次动画：

CSS部分 #

/* 复用原有动画逻辑，用CSS变量替换固定颜色 */
@keyframes single-bg-switch {
  0% { background: #dfdfdf; }
  15% { background: radial-gradient(var(--active-color), #dfdfdf); }
  35% { background: radial-gradient(var(--active-color), #dfdfdf); }
  50% { background: #dfdfdf; }
  100% { background: #dfdfdf; }
}

/* 基础样式 */
.target-element {
  --active-color: rgba(143, 50, 224, 0.6);
  animation: none;
}

JS部分 #

// 定义9种目标颜色
const bgColors = [
  'rgba(143, 50, 224, 0.6)',
  'rgba(224, 50, 143, 0.6)',
  'rgba(50, 224, 143, 0.6)',
  'rgba(224, 143, 50, 0.6)',
  'rgba(50, 143, 224, 0.6)',
  'rgba(143, 224, 50, 0.6)',
  'rgba(200, 50, 50, 0.6)',
  'rgba(50, 200, 50, 0.6)',
  'rgba(50, 50, 200, 0.6)'
];

const target = document.querySelector('.target-element');
let colorIndex = 0;

function runNextSwitch() {
  if (colorIndex >= bgColors.length) return; // 9次切换后停止

  // 设置当前切换颜色
  target.style.setProperty('--active-color', bgColors[colorIndex]);
  
  // 重置动画（强制重绘才能重新播放）
  target.style.animation = 'none';
  void target.offsetWidth;
  
  // 播放单次动画，时长匹配你的节奏，这里设为2s
  target.style.animation = 'single-bg-switch 2s forwards';

  // 等待动画结束，触发下一次切换
  setTimeout(() => {
    colorIndex++;
    runNextSwitch();
  }, 2000);
}

// 启动第一次切换
runNextSwitch();

说明 #

• 单次动画时长2s可根据另一动画节奏调整，确保切换时机完全匹配。
• 修改bgColors数组即可更换颜色，若需要重复播放，只需在colorIndex >= bgColors.length时重置colorIndex = 0。

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