background-position动画是唯一稳定、无需js、全浏览器兼容的“渐变划过”方案，因background-image本身不可过渡，仅background-position可平滑位移；需严格匹配background-size（如4色用400%）、渐变角度与位移轴垂直，并用@keyframes实现无缝循环。
直接用 background-position 动画配合足够大的 background-size，是唯一稳定、无需 JS、全浏览器兼容的“渐变划过”实现方式；写错一个参数——比如用错百分比、漏设 background-size 或角度不匹配——动画就卡住、跳变或完全不触发。
为什么 background-position 动画是唯一靠谱方案
因为 background-image（包括 linear-gradient()）本身不可过渡，浏览器对 transition: background 或 animation: change-bg 会静默忽略。真正能平滑位移的是 background-position：它相当于拖动一张被拉伸的渐变图，“窗口”移动了，颜色就“划过”了。
- 常见错误：写
transition: background 0.3s或在:hover里直接改background: linear-gradient(...)→ 渲染重绘，边缘露白、跳帧、三色以上必卡 -
background-size必须 ≥ 渐变色标数 × 100%，4 色推荐background-size: 400% 400%；设成120% 120%会导致位移范围不足，只在边缘抖动 - 渐变方向必须和位移轴垂直：水平划过用
linear-gradient(90deg, ...)+background-position: 0% 50% → 100% 50%
如何写出不卡顿的划过动画
核心是用 @keyframes 控制 background-position 循环位移，而非依赖 :hover 触发单次过渡——后者在移动端快速进出时极易卡在中间态。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 基础类必须声明完整动画：
animation: gradientShift 4.5s ease-in-out infinite -
@keyframes gradientShift中，0%设background-position: 0% 50%，50%设100% 50%，100%回到0% 50%，形成无缝循环 - 别用
right、center这类关键字值——不同浏览器解析不一致；坚持用100% 50%这种明确百分比 - 按钮有
border-radius时，加overflow: hidden防边缘露底色；伪元素模拟流光层时，也要同步设相同圆角值
hover 时暂停划过动画的正确写法
用户悬停时继续流动会分散注意力，但直接删动画或写 animation: none 会导致重绘抖动、闪一下。正确做法是初始化就带动画，只在 :hover 里改播放状态。
- 基础类必须带完整
animation声明（哪怕时长设为0s），否则:hover加动画会触发一次重绘 -
:hover中只写：animation-play-state: paused - 移动端必须加
touch-action: manipulation，否则 iOS Safari 和部分安卓 WebView 压制点击反馈，:active态根本不出 - 快速进出 hover 区域时，
@keyframes + animation-play-state比纯:hover + transition更可控
伪元素流光层怎么避免撕裂和错位
单独一层 ::before 模拟流光比只动背景更灵活，但极易因定位或变形出错。关键不是“加动画”，而是让光条斜切后刚好横跨按钮，且进出时无缝。
-
::before设position: absolute、inset: -2px（按描边宽调整）、z-index: -1 - 用
transform: skewX(-25deg)切出约 45° 光条；角度太大易穿出，太小像拖影 - 渐变定义为
linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent)，中间透亮、两边透明，避免硬边 - 动画关键帧里
left从-100%到100%，并在60%停留，防止回弹突兀
最常被忽略的点是 background-size 和渐变角度的匹配关系——差 1 度，位移就偏移；少 1% 尺寸，动画就断层。这不是“差不多就行”的事，每个数值都得对得上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
