css 中 background 渐变无法直接 transition，需用 css 变量控制色值并声明 transition，或用两层容器通过 opacity 过渡；safari 兼容性差，须 fallback；注意性能、可访问性及移动端适配。
用 CSS transition 控制 body 背景渐变变化
直接改 body 的 background 不会自动过渡，必须用可动画的属性 + 明确声明 transition。渐变本身不能被过渡，但你可以过渡 background-image 中的色值（需配合 JS 动态更新）或用两层重叠容器做淡入淡出。
最稳的方式是：用一个全屏 <div class="bg-overlay"> 覆盖页面，控制它的 <code>opacity 和 background，再给它加 transition: opacity 0.4s ease, background 0.6s ease。这样避免触发重排，兼容性也好。
-
background属性里写线性渐变时，确保起止色都用 RGB 或 HSL（不要用命名色），否则 Safari 可能跳变 - 别对
background单独设transition后直接换整个linear-gradient(...)值——浏览器不认这个为“可插值”，会硬切 - 如果要用纯 CSS 切换（比如 hover 或 :target），得提前定义好多个 class，每个 class 对应一组固定渐变值
用 JavaScript 动态切换渐变并触发平滑过渡
需要运行时计算颜色（比如根据时间、滚动位置或用户选择），就得靠 JS 更新元素样式。关键不是“怎么改”，而是“怎么改才不卡”：避免频繁读写 offsetHeight 或直接操作 style.background 多次。
推荐做法是只改一个自定义 CSS 变量，让 CSS 自己完成过渡：
body {
--grad-start: #ff6b6b;
--grad-end: #4ecdc4;
background: linear-gradient(135deg, var(--grad-start), var(--grad-end));
transition: background 0.5s ease;
}
然后 JS 里只改变量：
document.body.style.setProperty('--grad-start', '#8e2de2');
document.body.style.setProperty('--grad-end', '#4a00e0');
- Chrome/Firefox 支持
background过渡 CSS 变量，但 Safari 15.4+ 才稳定；旧版 Safari 需 fallback 到 opacity 切换两层 div - 别在
scroll事件里直接调用 setProperty —— 加个requestAnimationFrame节流 - 如果渐变角度也要动（比如旋转），
background整体无法过渡角度，得拆成background-image+background-position组合模拟
避免页面闪烁和布局抖动
渐变切换时突然白屏、闪一下黑、或者内容“弹跳”，大概率是没处理好渲染层提升和尺寸锚定。
- 给渐变容器加
will-change: background（仅在切换前临时加，结束后移除），尤其在低性能设备上能减少掉帧 - 确保
html和body都设了height: 100%，否则min-height: 100vh的容器在键盘弹出或地址栏收起时会缩动 - 如果用伪元素（
::before）画渐变底图，记得设content: ""+position: fixed+z-index: -1，不然可能遮住点击区域 - 移动端 Safari 对
background-attachment: fixed渐变支持差，一滚动就撕裂，一律禁用
用 CSS @keyframes 做非交互式循环渐变动画
如果只是想让背景自己缓慢流动（比如登录页呼吸感），不用 JS，纯 CSS 更轻量。但注意：@keyframes 不能直接动画 background 渐变色 stops，只能动画 background-position 或用 filter: hue-rotate() 微调。
安全做法是定义两个渐变状态，用 animation-timing-function: ease-in-out 循环过渡：
@keyframes gradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.bg-animated {
background: linear-gradient(90deg, #ff9a9e, #fad0c4, #a1c4fd);
background-size: 300% 300%;
animation: gradientShift 8s ease infinite;
}
- 别用太多色标（超过 4 个），iOS WebView 容易卡顿
-
background-size必须大于 100%，否则background-position动不起来 - 如果同时有文字，确保文字
color在所有渐变状态下都足够对比——别只看初始色
@media (prefers-color-scheme: dark) 里重写 --grad-start 又不会触发动画。这种场景，得单独监听 prefers-color-scheme 变化并手动重播 transition。
