可通过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 渐变图片不行，但用颜色、透明度或变量角度可以做出流畅的视觉过渡效果。关键看你要实现哪种“渐变变化”。
