通过伪元素、CSS动画或JavaScript可实现背景渐变过渡。1. 使用伪元素叠加，通过opacity变化实现视觉过渡；2. 利用CSS自定义属性配合JS逐帧更新颜色；3. 采用@keyframes动画直接切换渐变背景，适合循环效果。
背景渐变颜色的过渡在CSS中不能直接通过 transition 实现，因为 linear-gradient 属于 background-image，而 background-image 不支持平滑过渡。但可以通过一些技巧模拟出渐变色之间的过渡效果。
使用伪元素叠加实现渐变过渡
一种常见方法是利用两个层叠的伪元素（如 ::before 和 ::after），分别设置不同的渐变背景，再通过改变透明度或位移来实现视觉上的“过渡”效果。
示例代码：
.container {
position: relative;
width: 300px;
height: 200px;
overflow: hidden;
}
<p>.container::before,
.container::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: linear-gradient(45deg, #ff7e5f, #feb47b);
z-index: 1;
transition: opacity 0.5s ease-in-out;
opacity: 1;
}</p><p>.container::after {
background: linear-gradient(45deg, #6a11cb, #2575fc);
opacity: 0;
z-index: 2;
}</p><p>.container:hover::before {
opacity: 0;
}</p><p>.container:hover::after {
opacity: 1;
}</p>说明：默认显示第一个渐变，悬停时逐渐隐藏第一个、显示第二个，形成颜色过渡的视觉效果。
立即学习“前端免费学习笔记（深入）”；
使用 CSS 自定义属性 + JavaScript 模拟过渡
现代浏览器支持通过 CSS 变量动态控制渐变中的颜色值，结合 JavaScript 逐帧更新颜色，可实现真正的渐变过渡。
示例：
.element {
--grad-color1: #ff7e5f;
--grad-color2: #feb47b;
background: linear-gradient(45deg, var(--grad-color1), var(--grad-color2));
transition: background-color 0.5s ease; /* 注意：这不会直接影响渐变 */
width: 200px;
height: 150px;
}
配合 JavaScript 使用 setInterval 或 requestAnimationFrame 修改变量值，逐步改变颜色，从而实现渐变动画。
使用 Animation 替代 Transition
更推荐使用 @keyframes 动画来切换多个渐变背景。
.animate-bg {
background: linear-gradient(45deg, #ff7e5f, #feb47b);
animation: changeGradient 3s infinite alternate;
}
<p>@keyframes changeGradient {
from {
background: linear-gradient(45deg, #ff7e5f, #feb47b);
}
to {
background: linear-gradient(45deg, #6a11cb, #2575fc);
}
}</p>这种方式无需伪元素，适合循环切换背景渐变的场景。
基本上就这些方法。虽然 transition 无法直接作用于 linear-gradient，但通过伪元素、动画或 JS 控制，可以实现流畅的背景渐变过渡效果。关键是理解背景图不支持过渡的本质，并选择合适的技术方案绕过限制。
