用 background-clip: text + transition 最可靠，因无需额外 DOM、适配响应式与多语言、避免 Safari 模糊、兼容居中布局且原生支持度高。
直接用 background-clip: text + transition 实现最可靠，比用绝对定位的 .light 元素更稳定、更易维护，且无需额外 DOM 节点。
为什么不用绝对定位的“光条”方案
知识库中提到的 .light 方案依赖固定宽高和手动计算 top/right 值，实际中会遇到几个硬伤：
- 文字长度变化时（比如响应式断行、多语言切换），
left动画起点/终点失效 -
filter: blur(5px)在部分 Safari 版本下导致文字渲染模糊或锯齿 - 必须精确控制
z-index和层叠上下文，容易被父容器overflow: hidden截断 - 无法适配
text-align: center或flex居中场景
用 background-clip + transition 的标准写法
核心是把渐变背景“贴”到文字上，再平滑移动背景位置。浏览器原生支持，兼容性好（Chrome 4+, Firefox 16+, Safari 9+）。
关键点：
立即学习“前端免费学习笔记（深入）”；
-
color: transparent必须写，否则背景会被文字颜色盖住 -
background-size至少设为200% 100%，否则background-position: 100% 0没效果 -
transition必须写在默认状态（非:hover），否则移出时无动画 - 推荐用
hsl()或rgb()写渐变色，十六进制在深色模式下可能插值异常
示例：
.highlight-text {
background-image: linear-gradient(90deg, hsl(20, 100%, 60%), hsl(300, 100%, 60%));
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
transition: background-position 0.5s ease;
}
.highlight-text:hover {
background-position: 100% 0;
}
hover 触发之外的其他触发方式
如果不想只靠鼠标悬停，还可以用以下方式控制动画节奏：
- 用 JS 切换 class：调用
element.classList.add('active')，配合.highlight-text.active样式 - 配合
@media (prefers-reduced-motion: reduce)关闭动画，避免光敏用户不适 - 若需“划过即触发”而非持续 hover，可用
animation+animation-fill-mode: forwards替代transition - 移动端注意加
touch-action: manipulation防止延迟
真正要注意的是 background-clip: text 在 Firefox 中仍需 -webkit- 前缀才能生效，而 Safari 对 background-position 过渡的起始帧有时会跳变——建议始终在 :hover 里显式写 background-position: 0 0 作为重置锚点。
