可通过transition配合background-color实现颜色渐变，或利用伪元素opacity过渡模拟渐变背景切换，还可使用css自定义属性动画控制渐变角度变化，从而实现视觉上的平滑过渡效果。
在CSS中，transition 本身不能直接对 background-image 做渐变动画，比如从一个线性渐变平滑过渡到另一个。但可以通过一些技巧实现视觉上的“渐变背景”过渡效果。
使用 background-color 进行颜色渐变过渡
如果你只是想让背景颜色缓慢变化，可以直接使用 transition 配合 background-color：
.element { background-color: #3498db; transition: background-color 0.5s ease; } .element:hover { background-color: #e74c3c; }
这个例子中，鼠标悬停时背景色会平滑地从蓝色变为红色。
模拟渐变背景的过渡（使用伪元素）
如果需要两个不同渐变之间的“切换”，可以利用伪元素叠加 + 透明度过渡来模拟：
立即学习“前端免费学习笔记（深入）”；
.gradient-box { position: relative; height: 200px; background: linear-gradient(45deg, #ff7e5f, #feb47b); transition: opacity 0.6s ease; } .gradient-box::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, #6a11cb, #2575fc); opacity: 0; transition: opacity 0.6s ease; z-index: -1; } .gradient-box:hover::before { opacity: 1; }
这里通过控制伪元素的 opacity 实现两个渐变之间的淡入淡出效果，看起来就像渐变在变化。
使用 CSS 自定义属性（现代方法）
对于简单的线性渐变方向或颜色位置变化，可结合 CSS 变量和 background 中可动画的部分（如角度）：
.animated-gradient { background: linear-gradient(var(--angle), #ff6b6b, #4ecdc4); transition: --angle 0.5s ease; } .animated-gradient:hover { --angle: 135deg; }
注意：这种方法依赖于浏览器对 CSS 变量在渐变中的支持，并且只有变量引用的值能被 transition 感知时才有效。目前对 linear-gradient 的角度变化支持较好。
基本上就这些常见方式。直接 transition 渐变图片不行，但用颜色、透明度或变量角度可以做出流畅的视觉过渡效果。关键看你要实现哪种“渐变变化”。