用伪元素+opacity实现渐变背景平滑切换最可靠：因CSS渐变不可动画，需用::before和::after承载新旧渐变，通过opacity过渡模拟淡入淡出，避免跳变。
直接对 background 使用 transition 做渐变切换，浏览器通常不支持平滑过渡——因为 CSS 渐变（如 linear-gradient）属于**不可动画的属性值**，transition 会直接跳变，无法插值计算中间状态。
核心思路：用 opacity 过渡替代背景色过渡
不试图“过渡渐变本身”，而是用两个图层（比如伪元素）分别承载新旧渐变，通过控制它们的透明度实现视觉上的淡入淡出效果。
- 父容器设为相对定位，容纳两个重叠的伪元素（
::before和::after） - 一个伪元素显示当前渐变，另一个预加载目标渐变
- 触发切换时，把当前层 opacity 从 1 降到 0，目标层从 0 升到 1
- 两者 transition 都设在
opacity上，这是浏览器原生高效支持的可动画属性
基础实现结构（纯 CSS）
示例：鼠标悬停切换蓝→紫渐变背景
.fade-bg {
position: relative;
height: 300px;
}
.fade-bg::before,
.fade-bg::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
transition: opacity 0.4s ease;
}
.fade-bg::before {
background: linear-gradient(135deg, #4facfe, #00f2fe);
z-index: 1;
}
.fade-bg::after {
background: linear-gradient(135deg, #a6c1ee, #f67e7d);
opacity: 0;
z-index: 2;
}
.fade-bg:hover::before { opacity: 0; }
.fade-bg:hover::after { opacity: 1; }
进阶优化点
-
避免闪动：确保两个伪元素初始都存在（不要用
display: none），仅靠opacity: 0隐藏，否则可能触发重排或渲染延迟 -
更顺滑的缓动：用
cubic-bezier(0.34, 1.56, 0.64, 1)等非线性函数增强入场感，比默认ease更自然 -
支持多状态切换：可用 JS 动态切换 class（如
.state-1/.state-2），配合 CSS 变量管理不同渐变值，保持伪元素复用 -
兼顾性能：给伪元素加
will-change: opacity（慎用），或确保父容器启用硬件加速（如transform: translateZ(0)）
为什么不推荐 background-image + transition？
即使写成 transition: background-image 0.4s，大多数浏览器仍会忽略——W3C 明确规定 gradient 不在可动画属性列表中。部分 Chromium 版本有实验性支持，但兼容性差、行为不稳定，上线前极易翻车。
立即学习“前端免费学习笔记（深入）”；
基本上就这些。用伪元素 + opacity 是目前最可靠、零 JS、语义清晰的渐变背景平滑切换方案。
