纯css3文字波浪渐变动画通过@keyframes+background-image+-webkit-text-fill-color:transparent+background-clip:text实现，本质是渐变背景流动叠加正弦位移视觉错觉；必须用-webkit-text-fill-color:transparent保障兼容性，firefox需@supports降级。
纯 CSS3 实现文字波浪渐变流动动画，核心不靠 JS 控制位移，而是用 @keyframes + background-image + -webkit-text-fill-color: transparent + background-clip: text 这套组合拳。它本质是让渐变背景“流过”透明文字，再叠加正弦形位移模拟波浪起伏——不是真把每个字上下抖，而是视觉错觉。
为什么必须用 -webkit-text-fill-color: transparent 而非 color: transparent
因为 color: transparent 在部分浏览器（尤其是 Safari 16.6+ 和旧版 Chrome）中无法正确触发 background-clip: text 的裁剪行为；而 -webkit-text-fill-color 是 WebKit/Blink 内核对文字填充的底层控制属性，兼容性更稳。虽然它是私有前缀属性，但目前仍是实现镂空文字动画的事实标准。
- 必须同时写
-webkit-text-fill-color: transparent和color: transparent，前者生效，后者兜底 - 漏掉
background-clip: text或写成text外的值（如border-box），渐变不会贴合文字轮廓 - Firefox 不支持
background-clip: text，需用@supports降级为纯色文字或 SVG 替代方案
background-position 动画 + 正弦位移模拟波浪的关键参数
波浪感来自两层运动叠加：一是横向平移渐变背景制造“流动”，二是对文字容器做 transform: translateY() 的周期性上下偏移。两者都用 @keyframes 定义，但周期和缓动要错开，否则会显得机械。
- 背景平移推荐用
linear-gradient(90deg, ...)+background-size: 200% 200%+background-position: 0% 50%→100% 50%，循环时间设为4s，ease-in-out - Y 轴位移用
sin()函数思想：从0%帧设transform: translateY(0)，25%帧设translateY(-4px)，50%回到0，75%到+4px，100%归零，形成完整正弦波 - 两个动画 duration 最好不同（比如背景 4s、位移 3.7s），避免周期重合导致“顿挫感”
Firefox 兼容 fallback 方案怎么写才不破坏结构
不能直接用 @supports not (background-clip: text) 把整个动画块 display: none，那会丢失语义和可访问性。稳妥做法是在同一元素上分层处理：
- 主文字层保留正常
color和字体样式，作为降级内容 - 用伪元素
::before叠加带动画的渐变文字，仅在支持background-clip: text的浏览器中渲染 - 通过
@supports (background-clip: text) and (-webkit-background-clip: text)包裹动画相关声明，确保 Firefox 完全忽略这些规则 - 别忘了给伪元素加
content: attr(data-text)并从 HTML 提取文本，避免重复写死
真正难的不是写出第一版波浪效果，而是调参：background-size 太小波浪太密，太大又看不出流动；translateY 幅度超过 6px 在小字号下会模糊；所有动画 duration 差值小于 0.3s 就容易同步卡顿。这些细节没试过十几次根本定不下来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
