因为linear-gradient是静态图像，浏览器无法直接过渡渐变色；需用background-size设为200% 200%、background-position初始0% 0%并过渡该属性实现流动效果。
button:hover 用 background: linear-gradient 为什么没动画效果
因为 linear-gradient 本身是静态图像，CSS 不会自动过渡渐变色的起止位置或颜色值——你得明确告诉浏览器“哪些参数要过渡”“怎么过渡”。直接写 background: linear-gradient(...) + transition: background 0.3s 是无效的，浏览器无法插值两个渐变函数。
必须用 background-position 和 background-size 配合固定渐变背景
核心思路：把渐变设为固定尺寸（比如 200% 宽），再通过 background-position 移动它，配合 transition 实现“流动”错觉。这是目前最兼容、最可控的方式。
- 渐变层必须设
background-size: 200% 200%（宽度/高度至少翻倍，否则移不动） -
background-position初始设为0% 0%，悬停时改为100% 100%或其他偏移值 - 必须给
transition指定具体属性：transition: background-position 0.5s ease，不能只写background - 按钮背景需设为
background-origin: border-box（默认即可），避免 padding 影响定位基准
button {
background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #44b5b1);
background-size: 200% 200%;
background-position: 0% 0%;
transition: background-position 0.5s ease;
}
button:hover {
background-position: 100% 100%;
}
Chrome/Firefox/Safari 对 background-position 过渡的支持差异
现代浏览器基本都支持 background-position 的数值过渡，但 Safari 在某些旧版本（0px 0px → 20px 20px），前提是知道容器尺寸或用 JS 动态计算。
- 百分比值更灵活，适合响应式按钮，但 Safari 13.x 偶发跳帧
- 像素值过渡更稳，但需确保
background-size足够大，否则移出范围就空白 - 不要用
background-image过渡——所有浏览器都不支持
想让流动方向随鼠标进入方向变化？得用 JS 绑定坐标
CSS 本身无法感知鼠标从哪边进入，纯 CSS 只能做单向流动（比如统一从左下到右上）。如果需要“鼠标从左边来，渐变就从左往右流”，就必须监听 mousemove，动态算出角度，再设置 background-position 的 x/y 值。
- 纯 CSS 方案只能预设一个流动方向，别被“智能流动”宣传误导
- JS 方案要防抖
mousemove，否则频繁重绘影响性能 - 移动端无 hover，这类效果默认失效，需额外处理
:active或点击态
渐变流动的本质是“位移动画”，不是颜色变化；很多人卡在第一步——忘了 background-size 必须放大，导致 background-position 移了也看不见效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
