CSS无法直接过渡linear-gradient，需用background-position位移、多层opacity切换、@property动画渐变属性或SVG/Canvas实现。
直接用 transition 过渡 background 和 linear-gradient 是无效的——CSS 无法插值两个不同的渐变函数，浏览器会直接跳变，不会平滑过渡。
用 background-position 模拟渐变过渡
核心思路：固定渐变色 stops 不变，只移动背景位置，配合 background-size 超出容器范围，让不同颜色区域“滑入”视口。
- 设置
background: linear-gradient(...)，至少两个色标（如to right, #f00, #00f） - 设
background-size: 200% 200%（放大渐变画布） - 设
background-position: 0% 0%（初始显示左上角） - 在 hover 或 class 切换时，改
background-position: 100% 100%，触发 transition - 加
transition: background-position 0.4s ease
用多个 background-layer + opacity 切换
适用于需要切换完全不同渐变样式（比如从蓝→红→绿）的场景。
- 定义两层 background：一层是默认渐变，一层是目标渐变，都铺满
- 用
background-image叠加，例如：background: linear-gradient(to right, #00f, #0ff), linear-gradient(to right, #f00, #ff0); - 用
background-blend-mode: normal（默认），再通过opacity控制上层透明度 - 给伪元素或子元素设
opacity: 0 → 1，配合transition: opacity - 更稳妥的做法是用两个同尺寸的
::before/::after层，分别设不同渐变，靠 z-index 和 opacity 切换
用 CSS 自定义属性 + @property（现代方案）
Chrome 110+、Edge 110+、Safari 16.4+ 支持，可真正动画渐变角度/颜色。
立即学习“前端免费学习笔记（深入）”；
- 先注册可动画的自定义属性：
@property --grad-angle { syntax: ""; inherits: false; initial-value: 0deg; } - 在元素中使用：
background: linear-gradient(var(--grad-angle), #f00, #00f); - 设置过渡：
transition: --grad-angle 0.5s ease; - hover 时修改：
:hover { --grad-angle: 90deg; }
备选：用 SVG 或 Canvas 实现（兼容性最强）
当需要精确控制且必须支持老浏览器（如 IE11、旧 Safari）时：
- 把渐变做成内联 SVG 作为 background-image，用 JS 动态修改
gradientTransform - 或用 Canvas 绘制渐变，用
requestAnimationFrame逐帧更新，再设为 background - 虽然开发成本高，但效果最可控，无兼容断层
