流光文字需 background-size≥200%100%、background-image 单独声明、background-clip:text 与 -webkit-text-fill-color:transparent 配合，background-position 动画须带单位且跨度≥200%，避免跳帧与闪烁。
直接用 linear-gradient + background-size 就能做出流光文字，但 90% 的失败都卡在 background-size 没设对、或渐变方向与位移不匹配上。
background-size 必须 ≥200% 100% 才能动起来
背景位移动画不是“移动颜色”，而是让渐变图在文字区域内滑过。如果 background-size: 100% 100%，位移一到边缘就跳回，看起来就是闪一下或不动。
-
background-size至少设为200% 100%（横向拉伸 2 倍），才能提供足够位移空间 - 若用径向或复杂渐变，建议
background-size: 200% 200%避免头尾衔接突兀 - 不要写成
background: linear-gradient(...)—— 必须用background-image单独声明，否则background-size可能被忽略 - 旧版 Safari 对
background-size百分比解析不稳定，可加transform: translateZ(0)触发硬件加速
background-position 动画必须带单位且起止值合理
没单位的 background-position: -100% 0 在 IE 和部分旧 Chrome 中会被无视；起止值太小会导致动画太快、像闪烁。
- 关键帧中必须写明单位：
0% { background-position: -200% 50%; }，不能只写-200% 50%（某些浏览器会当无效） - 推荐起止值跨度 ≥200%，例如
-200% 50%→200% 50%，保证平滑扫过整个文字宽度 - 用
@keyframes比transition更可控：hover 触发的 transition 容易因初始值未声明而跳帧 - 避免
infinite linear简单循环——头尾衔接处易卡顿，改用ease-in-out或加缓冲帧（如 0%→95%→100%）
background-clip: text 必须配对 -webkit-text-fill-color: transparent
只写 color: transparent 不够，Safari 和旧版 Chrome 会忽略镂空效果，文字仍显实色块。
- 必须同时设置：
-webkit-background-clip: text和background-clip: text - 必须用
-webkit-text-fill-color: transparent，color: transparent仅作降级兜底 - 父容器禁用
transform、filter、will-change，这些会破坏 Safari 的background-clip渲染层 - 文字容器推荐设
display: inline-block或block，避免 inline 元素因行内盒模型导致裁剪错位
最容易被忽略的是：流光效果不是“背景在动”，而是“背景在文字形状里滑过”。一旦漏掉 background-clip: text 或 -webkit-text-fill-color: transparent，所有动画都只是在背景层跑，和文字无关。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
