参考文章：巧妙使用 CSS 渐变来实现波浪动画_css实现波浪动效-CSDN博客
思路
绘制两个曲面拼接起来，就形成了波浪形。
使用 radial-gradient 绘制曲面。
radial-gradient([size] at [position], /* 形状和位置 */[color-stop1], /* 颜色断点1 */[color-stop2] /* 颜色断点2 */
)/* 举例： */
background: radial-gradient(90% 50% at 20% 100%, #fff 98%, var(--color) 99%)Size（大小）：90% 50%
第一个值：渐变椭圆的宽度，第二个值：渐变椭圆的高度；也可以使用关键字：circle（圆形）或 ellipse（椭圆形）。
改变波浪形状大小：增大90%缩小50%可以让波浪更宽，反之更窄。
Position（位置）：at 20% 100%
at 后面的值定义渐变的中心点。第一个值：水平位置（left, center, right 或百分比），第二个值：垂直位置（top, center, bottom 或百分比）。
移动波浪的位置：缩小/增大20%会左/右移动波浪的位置。
Color Stops（颜色断点）：#fff 98%, var(--color) 99%
每个颜色断点包含：颜色值 + 位置值（百分比），可以有多个颜色断点。
绘制曲面代码
.wave {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: radial-gradient(100% 57% at bottom,#0000 100%, #2196F3 100.5%) no-repeat;background-size: 50% 100%;background-position: 0 100%;background-repeat: no-repeat;
}绘制波浪代码
.wave {position: absolute;top: 0;left: 0;width: 100%;height: 100%;--color: #2196F3;--w1: radial-gradient(100% 57% at bottom,#0000 100%, var(--color) 100.5%) no-repeat;--w2: radial-gradient(100% 58% at top, var(--color) 100%,#0000 100.5%) no-repeat;background: var(--w1), var(--w2);background-size: 50% 100%, 50% 100%;background-position: 0 100%, 100% 100%;background-repeat: no-repeat;
}具体使用需要自行调节 radial-gradient，background-size，background-position 的值，使形状衔接流畅。调整 background-size 的百分比会改变波浪的覆盖范围，调整 background-position 的值会改变两个渐变图案的重叠程度。
具体实现
登录页背景
代码
<template><view class="wave-container"> <view class="wave1"></view><view class="wave2"></view><view class="wave3"></view></view>
</template><style lang="scss" scoped>
.wave-container { position: relative; width: 100%;height: 300px;overflow: hidden;
}
.wave1 {position: absolute;top: 0;left: 0;width: 100%;height: 100%;--color: #487CF5;--w1: radial-gradient(95% 56.8% at 50% 100%,#0000 100%, var(--color) 100.5%) no-repeat;--w2: radial-gradient(150% 46.8% at 70% 10%, var(--color) 100%,#0000 100.5%) no-repeat;background: var(--w1), var(--w2);background-size: 70% 100%, 30% 100%;background-position: 0 100%, 100% 100%;background-repeat: no-repeat;z-index: 0;
}
.wave2 {position: absolute;top: 0;left: 0;width: 100%;height: 100%;--color: #819adf;--w1: radial-gradient(95% 53% at 38% 100%,#0000 100%, var(--color) 100.5%) no-repeat;--w2: radial-gradient(160% 56.8% at 80% 10%, var(--color) 100%,#0000 100.5%) no-repeat;background: var(--w1), var(--w2);background-size: 70% 100%, 30% 100%;background-position: 0 100%, 100% 100%;background-repeat: no-repeat;z-index: -1;opacity: 0.1; // 使用透明度实现叠加效果
}
.wave3 {position: absolute;top: 0;left: 0;width: 100%;height: 100%;--color: #E8F2FB;--w1: radial-gradient(140% 24% at 50% 80%,#0000 100%, var(--color) 100.5%) no-repeat;--w2: radial-gradient(80% 51% at 30% 10%, var(--color) 100%,#0000 100.5%) no-repeat;background: var(--w1), var(--w2);background-size: 20% 100%, 80% 100%;background-position: 0 100%, 100% 100%;background-repeat: no-repeat;z-index: -2;
}
</style>
