浏览器无法平滑过渡linear-gradient，应改用background-color或opacity动画模拟，或通过background-position位移实现“流动”效果，transition须写在常态样式中并明确指定属性。
hover时背景渐变不连续，本质是浏览器无法对background-image（比如linear-gradient）做平滑过渡——它默认当作“不可动画属性”，直接跳变。
用color或background-color替代gradient动画
最稳妥的方式：不直接过渡linear-gradient，而是用纯色+伪元素遮罩模拟渐变效果。例如：
- 给元素设一个基础背景色（如
#4a6fa5），再用::before覆盖一层半透明渐变层 - hover时只过渡伪元素的
opacity或background-color，这些属性天然支持transition - 这样视觉上像渐变在动，实际是颜色/透明度在匀速变化，毫无卡顿
用background-position实现“移动式”渐变过渡
如果必须用linear-gradient，可固定渐变色值，只过渡其位置：
- 定义一个宽幅渐变（如
linear-gradient(90deg, #ff6b6b, #4ecdc4, #44b5b1)） - 设
background-size: 200% 200%，再用background-position: 0% 50%定位起始点 - hover时改为
background-position: 100% 50%，配合transition: background-position 0.4s ease - 看起来像渐变在平滑流动，实则只是背景图在位移
确保transition写在正确的位置
容易忽略的细节：
立即学习“前端免费学习笔记（深入）”；
-
transition必须写在**常态样式里**（非hover），否则首次hover无过渡 - 只写
transition: all .3s不推荐——可能意外触发其他属性动画；应明确写transition: background-position .3s ease, background-color .3s ease - 若用了
background简写，hover时务必也用background简写（避免因属性覆盖导致过渡失效）
基本上就这些。核心就一条：别指望linear-gradient本身能过渡，换思路——要么用可动画属性模拟，要么用位移骗眼睛。
