可用 CSS 变量 --wave-duration 控制波浪动画频率，通过 animation: wave var(--wave-duration) linear infinite 在选择器中注入，因 @keyframes 内不支持 var()；多层波浪需各层独立声明该变量并配不同 background-size 以避免同步。
怎样用 CSS 变量控制波浪动画的起伏频率
波浪动画的“频率”在视觉上体现为波形移动快慢或上下起伏疏密程度；用 CSS 变量控制它，核心是把 animation-duration 或关键帧中的时间偏移量抽成 --wave-duration，再配合 var() 注入动画定义中。现代浏览器（Chrome 49+、Firefox 31+、Safari 9.1+、Edge 15+）全部支持，无需降级处理。
为什么不能直接在 @keyframes 里用 var()
CSS 自定义属性（变量）**不能在 @keyframes 块内被 var() 解析**——这是规范限制。你写 0% { animation-duration: var(--wave-duration); } 是无效的。必须把变量作用域放在选择器层级，让动画继承或通过 calc()/transform 链式传递。
- 错误写法：
@keyframes wave { 0% { background-position: calc(var(--wave-offset) * 1px) 0; } }（--wave-offset在 keyframes 内不可读） - 正确路径：变量定义在元素上 → 用
animation: wave var(--wave-duration) linear infinite;→ 关键帧内部用固定值，靠外部 duration 控制节奏 - 进阶技巧：若需动态调整振幅/波长，可用
background-size+calc()组合，例如background-size: calc(var(--wave-width) * 1px) 100px;
如何让同一组波浪支持多频率分层
真实波浪常有前层快、后层慢的错觉。用变量实现时，关键是给每层波浪容器独立声明变量，并避免全局污染：
- 外层容器设
--wave-duration: 8s;，内层波浪元素设--wave-duration: 5s; - 动画声明统一写成
animation: wave var(--wave-duration) ease-in-out infinite; - 注意：两层 SVG 波形的
background-size应不同（如 1200px vs 1600px），否则位移量相同会导致视觉同步，失去层次感 - 如果用 transform 实现浮动波（如文字波浪），可将
animation-delay也设为变量：animation-delay: calc(var(--i) * var(--wave-step));，其中--i是字母索引，--wave-step控制波长间隔
容易忽略的兼容与性能点
变量本身不触发重排，但高频修改（比如 JS 动态 setProperty）可能引发渲染抖动。尤其在移动端，以下三点常被跳过：
立即学习“前端免费学习笔记（深入）”；
-
will-change: animation;对使用变量驱动的动画无加速效果，真正有效的是will-change: background-position;或transform; - Safari 15.4 之前对
background-position的变量插值支持不稳定，建议 fallback 到transform: translateX()+ SVG mask 方案 - 不要用
calc(var(--a) + var(--b))做复杂运算——部分旧版 Edge 会解析失败，优先拆成单变量 + 固定系数，如background-position-x: calc(var(--base) * -1.2px);
