CSS background-image 不支持 transition，需用两层背景+opacity交叠、background-position位移或JS+CSS变量插值三种方案模拟渐变过渡效果。
background-image 不能直接 transition，得换思路
CSS 的 background-image 属性本身不支持过渡动画，哪怕你写 transition: background-image 0.3s，浏览器也只会硬切，没有渐变过程。这不是 bug，是规范限制——图像类属性（包括渐变）被归为“非可动画类型”。
真正能平滑过渡的，是 background-color 和 opacity 这类标量属性。所以得绕开直接动渐变，用间接方式模拟过渡效果。
用两层背景 + opacity 交叠实现渐变切换过渡
核心做法：给元素同时设置两个背景层（用 background-image 叠加），再通过控制其中一层的 opacity 来淡入淡出。这样视觉上就是渐变在“流动”，实际是透明度变化。
- 第一层背景设为初始渐变，
opacity: 1 - 第二层背景设为目标渐变，初始
opacity: 0，并加transition: opacity 0.4s ease - 状态切换时（如 hover），把第二层
opacity改成1，第一层可同步降到0（可选） - 必须用
background-clip: padding-box避免边框干扰叠加效果
.grad-btn {
background-image: linear-gradient(45deg, #ff6b6b, #4ecdc4);
position: relative;
}
.grad-btn::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background-image: linear-gradient(45deg, #45b7d1, #96c93d);
opacity: 0;
transition: opacity 0.4s ease;
z-index: -1;
}
.grad-btn:hover::before {
opacity: 1;
}
用 background-position 模拟“流动”渐变（适合单色系微调）
如果两个渐变角度、色标结构一致，只是起始/终止颜色不同，可以改用 background-position + background-size 配合位移来制造过渡错觉。但注意：这本质不是颜色变，而是“同一张渐变图在动”，所以只适用于渐变结构高度相似的场景。
立即学习“前端免费学习笔记（深入）”；
- 必须用
background-size: 200% 200%扩大渐变画布 - 初始
background-position: 0% 0%，hover 时移到100% 100% - 只能用于同方向、同分段数的渐变，否则会拉伸错位
- 不适用于颜色跨度大或方向不同的切换（比如从水平切到垂直）
.flow-btn {
background: linear-gradient(45deg, #ff9a9e, #fad0c4, #a1c4fd, #c2e9fb);
background-size: 200% 200%;
transition: background-position 0.5s ease;
}
.flow-btn:hover {
background-position: 100% 100%;
}
JavaScript + CSS 自定义属性动态插值（最灵活但需脚本）
当渐变参数差异大（比如角度从 0deg → 135deg，色标从 2 个 → 4 个），纯 CSS 很难兼顾兼容与效果，这时用 JS 控制 CSS 自定义属性，在帧间插值生成中间态渐变更可靠。
- 把渐变的关键参数（角度、色标位置、颜色）抽成
--grad-angle、--c1、--c2等变量 - 用
requestAnimationFrame逐帧更新这些变量，再让 CSS 用linear-gradient(var(--grad-angle), var(--c1), var(--c2))渲染 - 注意 Safari 对自定义属性在
linear-gradient()中的支持较晚（iOS 15.4+），旧版本需降级 fallback - 别忘了加
will-change: background-image提示浏览器优化渲染
复杂点不在写法，而在颜色空间插值——RGB 插值易发灰，推荐转 HSL 或 LCH 后插值再转回，否则中间态会偏暗或失饱和。
