background-position动画更可靠，因background-image不可过渡，浏览器静默忽略transition: background；而background-position通过拉伸渐变图（background-size≥200%）并位移“窗口”实现平滑流动效果。
background-position 动画为什么比直接 transition background 更可靠
因为 background-image 本身不是可过渡属性，写 transition: background 0.3s 在大多数浏览器里会被静默忽略，尤其三色以上渐变时直接跳变。真正能平滑动画的是 background-position——它相当于“拖动一张大渐变图”，只要图够大（靠 background-size 拉伸），位移就自然流畅。
- 必须同时设置
background-size: 300% 300%（至少 200% × 200%），否则background-position移动范围不足，动画卡在边缘 - 渐变角度和位移方向要匹配：水平流动用
linear-gradient(90deg, ...)+background-position: 0% 50% → 100% 50% - 别用
right或center这类关键字值，不同浏览器解析不一致；坚持用百分比，比如100% 50% - 如果按钮有
border-radius或background-clip: padding-box，位移中边缘可能露底色，加overflow: hidden可兜底
hover 时暂停流动动画的正确写法
用户悬停时继续流动会分散注意力，但直接删掉 animation 或写 animation: none 会导致重绘抖动、闪一下。正确做法是初始化就带动画，只在 :hover 里改播放状态。
- 基础类必须声明完整动画：
animation: gradientShift 4.5s ease-in-out infinite -
:hover中只覆盖播放状态：animation-play-state: paused - 别漏掉
touch-action: manipulation—— iOS Safari 和部分安卓 WebView 默认压制快速点击反馈，没它，:active态根本不出 - 移动端快速进出 hover 区域容易卡在中间态，此时
@keyframes+animation-play-state比纯:hover+transition更可控
流光层（glitter overlay）怎么避免撕裂和错位
单独一层伪元素模拟流光，比只动背景更灵活，但极易因定位或变形出错。核心是让“光条”斜切后刚好横跨按钮，且进出时无缝。
- 伪元素用
::before，position: absolute，宽高设为 100%，top: 0; left: -100%起始位置 - 用
transform: skewX(-25deg)切出 45° 光条，角度太大易穿出，太小像拖影 - 渐变定义为
linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent)，中间透亮、两边透明，避免硬边 - 动画关键帧里
left从-100%到100%，60% 停留再走完，防止回弹突兀 - 如果按钮用了
border-radius，伪元素也要同步设相同值，否则圆角处会漏光
移动端点击无反馈？先查这三件事
不是渐变写错了，而是交互链断在底层。iOS Safari 和微信内嵌浏览器对按钮点击反馈极其敏感，漏一项就感觉“点不动”。
立即学习“前端免费学习笔记（深入）”；
- 必须加
touch-action: manipulation（CSS 或内联 style 都行），禁用浏览器默认的延迟判定 -
:active伪类要配视觉反馈，比如opacity: 0.8；避免用transform: scale()，某些安卓 WebView 会卡顿重绘 - 检查是否父层或遮罩层写了
pointer-events: none，它会直接拦截触摸事件，连:active都不触发
最易被忽略的是伪元素层级和 overflow: hidden 的配合——流光动画一旦溢出容器边界，不仅视觉断裂，还可能触发意外滚动或截断动画。写完务必在真机上快速点按测试三次以上。
