最推荐使用CSS @keyframes实现背景色循环动画，因其更轻量、顺滑且性能优；JS方案仅适用于需逻辑判断的动态场景。
用 setInterval 配合 document.body.style.backgroundColor 最直接
不需要框架或外部库，纯 JS 就能实现。核心是定时修改 body 的内联样式。注意别写成 document.body.style.background（可能覆盖图片/渐变），backgroundColor 更安全、更精准。
常见错误是把颜色值写死成字符串没加引号，或者忘记用十六进制/RGB 格式；还有人误用 background-color（带短横线）作为属性名——JS 里必须用驼峰写法 backgroundColor。
- 颜色数组建议用十六进制（如
"#ff6b6b"）或 RGB 字符串（如"rgb(100, 150, 200)"），避免命名色（如"red"）导致可维护性差 - 间隔时间别设太短（如
10ms），否则肉眼不可辨且浪费 CPU；800–2000ms 是较舒服的范围 - 记得在
<script></script>标签里加defer或放在</body>前，否则document.body可能还没加载完成
用 CSS @keyframes + animation 更轻量、更顺滑
CSS 动画由浏览器渲染引擎直接驱动，比 JS 定时器更高效，尤其在低端设备上帧率更稳。适合背景色循环变化这种简单过渡场景。
容易踩的坑是：动画只写 from/to 导致只有两帧，过渡生硬；或者忘了加 infinite 和 ease-in-out，看起来像“卡顿闪烁”。另外，如果页面已有 background（比如设置了图片），background-color 动画会被覆盖——得统一用 background 属性做动画。
立即学习“前端免费学习笔记（深入）”；
- 示例关键代码：
@keyframes bgShift { 0% { background-color: #4ecdc4; } 50% { background-color: #ff6b6b; } 100% { background-color: #44b3a2; } } body { animation: bgShift 4s ease-in-out infinite; } - 若要动态控制（比如暂停/换速），得用 JS 操作
style.animationPlayState或style.animationDuration，不能只靠 CSS - 兼容性没问题：Chrome 43+、Firefox 16+、Safari 9+ 都支持
@keyframes背景色动画
想响应用户交互？监听 click 或 scroll 触发单次变色
不是所有场景都要“自动”轮播。有时只是点击按钮换一次色，或滚动到某区域才触发，这时候用定时器反而多余。
典型错误是给多个元素绑了重复事件监听器，导致点一次变好几次色；或者没清除旧的 setInterval，造成内存泄漏和颜色乱跳。
- 用
addEventListener绑定click时，推荐用一次性监听：{ once: true }选项 - 监听
scroll要节流，比如用setTimeout防抖，否则快速滚动时会高频触发，卡顿明显 - 颜色值建议存在数组里，用
Math.floor(Math.random() * colors.length)抽一个，比硬编码更灵活
移动端要注意 background-color 动画的 repaint 行为
iOS Safari 对 background-color 的硬件加速支持有限，纯色切换一般没问题，但若同时有其他动画（比如文字淡入、盒子位移），可能触发整页重绘，导致掉帧。
真正影响体验的不是“能不能动”，而是“动的时候有没有卡”。测试时别只看桌面 Chrome，务必真机连 Safari 开发者工具查 FPS 和层合成情况。
- 优先用
transform或opacity做动画（它们走 GPU 合成），背景色变化只是辅助效果 - 如果设计要求必须渐变色流动，别用 JS 改
backgroundColor，改用background: linear-gradient(...)+background-position动画，性能好得多 - 深色模式下自动适配？别手动监听
prefers-color-scheme再 JS 切色，直接用 CSS 媒体查询：@media (prefers-color-scheme: dark) { body { background-color: #121212; } }
实际项目里，多数时候用 CSS @keyframes 就够了——写得少、跑得顺、易维护。JS 方案只在需要逻辑判断（比如根据时间、天气 API 返回值变色）时才值得上。
