纯css流光文字核心是background-clip: text配合渐变背景与background-position动画；必须同时设color: transparent和-webkit-text-fill-color: transparent以确保文字透明显色，且safari需加-webkit-background-clip: text前缀，否则失效。
纯 CSS 实现流光文字，核心就一条：用 background-clip: text 把渐变背景“抠”进文字轮廓里，再靠 background-position 动画让它动起来。不写 color: transparent 和 -webkit-text-fill-color: transparent，效果直接消失；在 Safari 里漏掉 -webkit-background-clip: text，文字变黑块或空白——不是代码错，是渲染链断了。
为什么 background-clip: text 必须配 color: transparent 和 -webkit-text-fill-color: transparent
文字默认有颜色（比如黑色），它会像一层不透明胶片盖住背后的渐变背景。background-clip: text 只是“裁剪范围”，不是“穿透开关”。必须让文字本体透明，才能露出底下的渐变。
-
color: transparent是标准属性，现代浏览器都认，但 Safari（尤其 iOS 15.4 及更早）只靠它会失效甚至文字消失 -
-webkit-text-fill-color: transparent是 Safari 和旧版 Chrome 的刚需，必须显式写，不能省 - 只设
background-clip: text不设这两行 → 文字全黑/全白/一片空白，查半天发现是漏了这一句
background-position 动画卡顿、跳帧或不动的常见原因
动画不起作用，或者一动就闪、卡成 PPT，大概率是 background-size 和 background-position 搭配错了。浏览器需要“足够宽的画布”才能平滑位移。
- 没设
background-size→ 默认是 100% 100%，background-position: -100% 0到0 0就是原地闪，不是扫光 - 推荐
background-size: 200% 100%（横向拉宽一倍），再配合background-position: -100% 0 → 0 0或-100% 50% → 100% 50% - 用
%值动画比用px更安全，但起始值必须显式声明（比如background-position: -100% 50%），否则 transition 无法推算起点 - 别用
ease-in-out—— 光在文字两端减速，中间拖尾；linear才符合“匀速扫过”的视觉直觉
Safari 和 Firefox 的兼容性硬伤怎么绕
不是所有浏览器都把 background-clip: text 当回事。Safari 要前缀+双填色，Firefox 目前（2026 年 5 月）仍完全不支持，得降级。
- Safari：必须同时写
-webkit-background-clip: text（放前面）和background-clip: text；-webkit-text-fill-color: transparent不可省；父容器避免transform或filter，否则裁剪失效 - Firefox：直接忽略
background-clip: text，文字回退为默认色。稳妥方案是用@supports (background-clip: text)包裹流光样式，不支持时 fallback 到普通渐变色或text-shadow模拟 - 移动端 WebView（尤其 Android 旧版）对
background-position% 动画支持不稳定，可加will-change: background-position提示渲染层，或改用transform: translateX()模拟位移（需额外 wrapper 元素）
真正难的不是写出第一版流光，而是让同一段 CSS 在 Safari、Chrome、Edge 上表现一致，又不被 Firefox 彻底放弃。参数微调（比如 background-size 宽度、动画时长、起止偏移量）必须按实际字号和容器宽度试，没有万能值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
