17370845950

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
• 虽然开发成本高，但效果最可控，无兼容断层