流光文字需用CSS变量驱动conic-gradient的from角度实现旋转动画，配合background-clip:text和text-fill-color:transparent使mask生效；必须显式声明变量、写全deg单位、双写mask-image兼容Safari，禁用backdrop-filter保性能。
mask-image 配合 conic-gradient 变量驱动流光方向
直接用 mask-image 套 conic-gradient 是流光文字的起点，但静态渐变毫无“流动”感。关键在让锥形渐变的起始角动起来——必须用 CSS 自定义变量（如 --mask-rotate）作为 from 参数，否则浏览器无法插值动画。写死 from 45deg 或用 transform: rotate() 都无效，因为 mask 渲染不响应 transform 变化。
实操要点：
- 变量必须显式声明在元素上，例如
style="--mask-rotate: 0deg;"，不能只在:root定义后指望继承（mask 作用域不继承变量） -
conic-gradient(from var(--mask-rotate), #fff, rgba(255,255,255,0))中的白色区域控制显示，透明区遮盖，顺序不能反 - 单位
deg必须写全，0或0rad会失效，浏览器将回退为默认角度导致流光突跳 - 动画只能靠
@keyframes更新变量值，不能试图动画mask-position或mask-size——它们不触发 mask 重绘
文字内容需用 background-clip + text-fill-color 才能被 mask 作用
CSS mask 本身不直接作用于文字形状，它只对元素的“绘制区域”生效。所以你不能对普通 直接加 mask-image 就期待文字发光——它只会把整个盒子裁掉一块。真正生效的路径是：先用 background-clip: text 把渐变背景“贴”到文字轮廓上，再用 -webkit-text-fill-color: transparent 挖空文字色，最后用 mask 对这个带背景的文字层做遮罩。
常见错误现象：
- 文字变成全黑或全白：漏了
-webkit-text-fill-color: transparent，文字仍保留默认颜色，遮罩被忽略 - 流光从左到右平移，而非绕文字旋转：误用了
linear-gradient而非conic-gradient，mask 方向错位 - 在 Safari 上完全不显示：未加
-webkit-mask-image前缀，且未设-webkit-mask-repeat: no-repeat - 文字边缘锯齿严重：mask 图像分辨率不足，应避免用 PNG 作 mask，优先用 CSS 渐变生成
animation-timeline 不适用，必须用 @keyframes 显式更新变量
有人尝试用实验性 animation-timeline: scroll() 控制流光节奏，结果发现变量根本不更新——因为 animation-timeline 只影响动画播放时机，不参与变量插值逻辑。目前唯一稳定方案仍是传统 @keyframes，在每个关键帧里重新赋值变量。
示例代码片段：
h1 {
--mask-rotate: 0deg;
background: linear-gradient(90deg, #ff0080, #3300ff, #00ddff);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-mask-image: conic-gradient(from var(--mask-rotate), #fff, rgba(255,255,255,0));
mask-image: conic-gradient(from var(--mask-rotate), #fff, rgba(255,255,255,0));
animation: mask-rotate 4s linear infinite;
}
@keyframes mask-rotate {
from { --mask-rotate: 0deg; }
to { --mask-rotate: 360deg; }
}
注意：mask-image 必须写两遍（带前缀和不带），Safari 16.4+ 才支持无前缀版本；animation 的 duration 直接决定流光速度，调快会导致闪烁，建议不低于 2.5s。
性能敏感点：避免 mask 与 backdrop-filter 同时使用
一旦给流光文字容器加了 backdrop-filter: blur(4px)，mask 动画帧率会断崖式下跌，尤其在 macOS Safari 和旧版 Chrome 上。这是因为两者都触发复杂合成层，浏览器被迫降级为 CPU 渲染。真实项目中若需毛玻璃背景，应把文字层和 backdrop 层彻底分离：文字用绝对定位脱离文档流，其父容器单独应用 backdrop-filter，且父容器不能设 overflow: hidden（会截断 mask 效果）。
另一个易忽略点是字体抗锯齿。系统默认的 font-smoothing: auto 在 mask 下容易发虚，建议强制开启：-webkit-font-smoothing: subpixel-antialiased;，Windows 上则用 font-smooth: always;。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
