纯css按钮渐变流动效果需用background-image+linear-gradient配合background-size≥200%和background-position动画实现，方向须垂直，时长3s~6s；hover时用animation-play-state:paused暂停；兼容性最佳方案是linear-gradient，避免conic-gradient或mask-image；需关闭-webkit-tap-highlight-color并添加:active态。
用 background-image + animation 实现按钮渐变流动
纯 CSS 就能做，不需要 JS。核心是用 linear-gradient 定义渐变色，再通过 background-size 和 background-position 配合 @keyframes 移动背景位置，形成“流动”错觉。
常见错误是直接对 background-color 动画——它不支持多色过渡，更无法流动；必须用 background-image 才行。
- 渐变方向要和动画位移方向垂直（比如水平流动，就用左右向渐变）
-
background-size至少设为200% 200%，否则位移后会露底色 - 动画时长建议
3s ~ 6s，太快显得躁，太慢看不出流动感
.btn-flow {
background-image: linear-gradient(90deg, #ff6b6b, #4ecdc4, #44b5b1, #ff6b6b);
background-size: 300% 300%;
animation: gradientShift 4.5s ease-in-out infinite;
}
@keyframes gradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
按钮 hover 时暂停流动动画
用户交互时停掉动画更友好，否则鼠标悬停瞬间可能卡顿或干扰视觉焦点。关键不是删掉 animation，而是用 animation-play-state 控制暂停状态。
注意：不能只写 animation-play-state: paused 在 :hover 里——如果初始没设动画，hover 时再加会闪一下。必须初始化就带动画，hover 只改播放状态。
- 初始状态必须声明完整
animation（含名称、时长、函数、循环） - :hover 中只覆盖
animation-play-state: paused - 别用
animation: none，会导致重绘和样式抖动
兼容性差的写法：用 mask-image 或 conic-gradient
想用 conic-gradient 做旋转流动？或者套 mask-image 切出波浪边？这些在 Safari 15.4 之前、旧版 Edge 或部分安卓 WebView 里直接不渲染，或渲染异常。
真正能落地的流动渐变，目前最稳还是 linear-gradient + background-position 方案。它从 Chrome 26、Firefox 16、Safari 6.1 就已支持，连 IE10 都能 fallback 到单色背景。
- 避免
repeating-linear-gradient做条纹流动——边缘容易出现像素级撕裂 - 别在
transform动画里嵌套这个背景动画，部分 iOS Safari 会掉帧 - 如果按钮有圆角，确保
border-radius不过大（建议 ≤ 12px），否则流动边缘可能被裁切生硬
移动端点击无反馈？补上 -webkit-tap-highlight-color
iOS Safari 点击按钮时默认灰色遮罩会盖住渐变流动效果，看起来像“卡死”。这不是动画问题，是系统高亮层干扰。
必须显式关闭并手动加点击态，否则用户会觉得按钮没响应。
- 加
-webkit-tap-highlight-color: transparent关闭默认高亮 - 用
:active降低透明度或微调背景位置，例如background-position: 20% 50% - 别依赖
:focus模拟点击态——移动端没有可靠 focus 触发时机
background-size 到 400% 让过渡更绵长。这些细节没法一劳永逸，得调着看。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
