必须用 background-image: linear-gradient() 配合 CSS 动画；JS 频繁修改 style.backgroundImage 会强制重排重绘、无法 GPU 加速，导致中低端设备帧率骤降，应改用 CSS 变量控制渐变色并由 CSS 引擎处理插值。
直接用 background-image: linear-gradient() 配合 CSS 动画是唯一稳定、可维护的方案；JS 频繁改内联样式（比如 element.style.backgroundImage）必然卡顿，别试。
为什么不能用 JS 直接改 style.backgroundImage 做动画
浏览器对内联样式的重写无法触发 GPU 加速，且每次修改都会强制重排重绘。实测每 60ms 调一次 element.style.backgroundImage = 'linear-gradient(...)' ，在中低端安卓机上帧率立刻跌破 20fps，iOS 上还可能触发 WebKit 渲染管线异常。
- 不是性能调优问题，是渲染机制限制——CSS 自定义属性（
--grad-color-1）+background-image: linear-gradient(var(--grad-color-1), ...)才能走优化通路 - 用
setInterval或requestAnimationFrame反复拼接字符串写死渐变值，等于主动放弃浏览器的样式缓存和合成层提升 - 真要 JS 控制，只该更新 CSS 变量，让 CSS 引擎自己算插值和过渡
@keyframes + linear-gradient 的正确写法
关键不是“能不能动”，而是“怎么动才不崩”。必须把所有颜色逻辑塞进单条 background-image 声明里，靠 background-position 或 background-size 移动它，或靠预设色停点循环切换。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 流动效果优先用位移：
background-size: 200% 200%; animation: bgShift 8s ease-in-out infinite;，再在@keyframes bgShift里只动background-position - 换色动画必须用 HSL 写死色相：比如
linear-gradient(hsl(0, 100%, 60%), hsl(120, 100%, 60%), hsl(240, 100%, 60%))，避免 RGB 插值出灰脏色 - 别在
@keyframes里写多个background-image值来回切——浏览器不保证平滑过渡，尤其 Safari 会闪
iOS 上 background-attachment: fixed + 渐变的致命 Bug
iOS Safari（16.4 之前）遇到 background-attachment: fixed 和 linear-gradient 组合，会出现白屏、错位或滚动卡死，这不是兼容性问题，是 WebKit 已知渲染管线缺陷。
立即学习“前端免费学习笔记（深入）”；
- 绕过方法只有两个：去掉
fixed，改用transform: translateZ(0)+ JS 监听scroll手动更新background-position - 或者彻底放弃视差，用纯色相循环动画（
@keyframes hueRotate驱动 HSL 色相变化），更稳 - 模拟器无法复现该问题，必须真机连 Safari 开发者工具调试
最易被忽略的一点：HSL 值里 s 和 l 必须带 % 单位，写成 hsl(180, 100, 50) 会被当成无效值降级到黑色——这种错误在 DevTools 里不报错，只静默失败。
