一条从深绿到浅沙的横向渐变当作海滩俯视图，上面叠着四层半透明的浪。每层各自左右推移、边缘轮廓不断伸缩，浪线上还有一串白色光晕顺着曲线滑动，像拍岸溅起的浪花。全程纯 CSS，没有一行 JavaScript，也没有用到图片：浪的轮廓由 CSS shape() 路径裁出，浪花用 offset-path 贴在同一条曲线上，形变交给 @property 注册的自定义属性做插值。神似苹果动态海浪壁纸
这片 CSS 海浪由哪几层拼成
一条曲线两用。同一组坐标变量写成两份：一份闭合成 clip-path 裁出浪的水面，一份只留曲线段供浪花当运动轨迹，所以浪花永远贴在浪尖上，不会脱节。
浪花位置自动均分。每层浪里十个 <i>，用 sibling-index() 与 sibling-count() 算出各自在曲线上的百分比位置，增删一个元素不用改任何数值。
四层靠负延迟错开。周期分别是 10s/11s/14s/13s，配上 -2s 到 -6s 的负 delay，进场即处在不同相位，看不出循环节奏。
值得看的两处写法
其一，让百分比能被动画插值。普通自定义属性在关键帧里只会整数跳变，注册类型后浏览器才知道怎么算中间值：
@property --cp {
syntax: "<percentage>";
initial-value: 100%;
}浪的形变动画只改这一个 --cp，它是曲线控制点的横坐标，一个值变化就带动整条浪线起伏。
其二，浪花的缩放和透明度跟着同一条时间线走。光晕用径向渐变画成，放大到接近原尺寸时透明度拉满，收缩时淡下去，与浪的推移共用一个周期，于是浪推到最前面时浪花也最明显。
能改的地方
配色在 .beach 的渐变里，改成冷色就是夜海；每层浪的节奏、宽度、曲线控制点都集中在 .wave--1 到 .wave--4 的变量块，一层一组，互不干扰。想加第五层，复制一组变量再补一个同名容器即可，源码中变量均有前缀注释。
常见问题
打开后是一片渐变，没有浪？
这个素材用了较新的 CSS 特性：shape() 与 offset-path 需要 Chrome 135 及以上，浪花的 sibling-index() 需要 Chrome 138 及以上，源码里已用 @supports 做了兼容判断，旧浏览器会隐藏浪花只保留浪体。Safari 与 Firefox 当前支持进度不一，建议用新版 Chrome 或 Edge 查看。
能当页面背景吗？
可以。整体是一个占满父容器的绝对定位结构，放进任意容器并设定尺寸即可，内容层叠在上面就行。
会不会很耗性能？
四十个光晕元素在动，脚本占用为零，动画属性以 transform 和 opacity 为主并标注了 will-change，中端设备上表现平稳；对低端机可减少每层的 <i> 数量。
适合用在哪
旅游、民宿、水上项目的首屏背景，夏季活动页的氛围层，也适合当作 shape() 与 offset-path 的学习范例。完整变量与关键帧下载后可查看。
