纯CSS无法直接过渡渐变背景，需用伪元素配合opacity、background-position或transform等可过渡属性模拟动画效果。
用纯 CSS 实现渐变背景的 hover 过渡，直接在 background 上加 transition 是无效的——因为 CSS 不支持渐变色值之间的插值动画。生硬切换的本质是“跳变”，不是“过渡”。解决办法不是强行过渡 background，而是用视觉 trick：借助伪元素（::before 或 ::after）叠加一层可动画的遮罩或渐变层，再配合 opacity、transform 或 background-position 等可过渡属性来模拟平滑变化。
用伪元素 + opacity 实现淡入淡出效果
这是最稳妥、兼容性最好的方案。原理是：默认状态下伪元素完全透明；hover 时将其 opacity 从 0 变为 1，同时它本身带目标渐变背景，视觉上就表现为“新渐变淡入”。
- 给容器设相对定位（
position: relative），确保伪元素能准确覆盖 - 伪元素绝对定位填满父容器，
z-index: -1避免遮挡内容 - 只对
opacity做 transition（它天然支持平滑过渡）
.btn {
position: relative;
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
color: white;
padding: 12px 24px;
border: none;
cursor: pointer;
}
.btn::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: linear-gradient(45deg, #45b7d1, #96c93d);
opacity: 0;
transition: opacity 0.4s ease;
z-index: -1;
}
.btn:hover::before {
opacity: 1;
}
用 background-position 模拟方向流动感
适合想让渐变“滑动”或“扫描”式切换的场景。核心是把渐变写成超宽（如 400%），再通过移动 background-position 让不同色段进入视区，而 position 是可过渡的。
- 设置
background-size: 400% 400%扩大渐变画布 - 默认
background-position: 0% 0%，hover 时移到100% 100%等位置 - 需搭配
background-clip: text或覆盖层才能突出变化（否则看不出位移）
background-clip: text + color: transparent，再用伪元素做底衬，hover 时动 position 就有“光扫过”的效果。
用 transform 缩放/位移制造层次过渡
比 opacity 更有设计感。比如伪元素初始 scale(0.8) 且带模糊或偏色，hover 时放大到 scale(1)，同时调整 opacity 或 filter，形成纵深渐变入场感。
立即学习“前端免费学习笔记（深入）”；
- 伪元素加
transform: scale(0.95)和轻微filter: blur(1px) - hover 时变为
scale(1) filter: blur(0)，transition 两者 - 注意加上
will-change: transform, opacity提升性能
避坑提醒
这些方法看似绕，但比硬刚 background 有效得多：
- 别给
background-image或background写 transition —— 浏览器会忽略 - 伪元素务必设
content: ''，否则不渲染 - 移动端要注意
hover触发时机（部分 iOS 需点击才生效），可加:active补充 - 如果按钮有圆角，伪元素也要加
border-radius: inherit保持一致
基本上就这些。关键不是“让渐变动起来”，而是“让能动的元素去承载渐变”。用好伪元素 + 可过渡属性，生硬就消失了。
