移动端动态流光背景需用伪元素+transform替代background-position动画，配合首尾同色渐变与background-size≥200%，并为触发动画元素添加will-change: background-position。
移动端用 linear-gradient 做动态流光背景，核心不是“能不能做”，而是“别一上手就卡顿或闪屏”——iOS Safari 对 background-position 动画的重绘优化差，Android 低版本 WebView 对 -webkit-background-clip: text 支持不全，这两点踩中一个，效果就废一半。
移动端必须加 will-change: background-position
不加这句，iOS 上动画大概率掉帧，尤其在滚动中叠加流光背景时。它告诉浏览器：“这个属性要频繁变，提前升层”。但注意：只对触发动画的元素加，别全局写在 body 或根容器上，否则内存占用飙升。
- 正确写法：
.hero-banner { will-change: background-position; } - 搭配动画必须用
transform替代background-position的方案（见下一条）更稳妥 - 加了也无效？检查是否被父级
overflow: hidden截断了图层提升
用伪元素 + transform 替代直接动 background-position
直接在文字或容器上 animating background-position，在 iOS 15–16 和部分 Android Chrome 中会触发重排，造成闪烁。换成伪元素承载渐变背景、再用 transform: translateX() 移动它，是目前兼容性最稳的路径。
- HTML 只需普通标签：
<h2 class="glow-title">实时数据</h2> - CSS 关键结构：
.glow-title { position: relative; color: transparent; -webkit-background-clip: text; background-clip: text; } .glow-title::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, #00c9ff, #92fe9d, #00c9ff); background-size: 300% 100%; animation: glow-move 4s infinite linear; z-index: -1; } @keyframes glow-move { 0% { transform: translateX(-25%); } 100% { transform: translateX(25%); } } - 好处：
transform走 GPU 合成，不触发布局重排；伪元素隔离动画，不影响文字可访问性
background-size 至少设为 200% 且首尾色一致
这是实现“无缝循环”的硬性条件。如果渐变色从 #ff0000 到 #00ff00 再到 #0000ff，结尾没回到起点，动画走到头就会跳回，肉眼可见卡顿。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
linear-gradient(90deg, #3498db, #f47920, #d71345, #3498db)—— 首尾同色 -
background-size设300% 100%比200% 100%更平滑，尤其在宽屏手机上 - 别用百分比定位写死起点终点（如
0%, 50%, 100%），改用色标位置（如0%, 33%, 66%, 100%）控制节奏
真正难的不是写出流光，而是让所有安卓低端机和 iOS 老系统都跑得稳——伪元素方案 + transform + 首尾闭环渐变，这三者缺一不可。漏掉任意一个，上线后用户截屏发群里问“为什么我的手机一闪一闪”，你就得连夜改包。
