CSS实现波浪效果

参考文章：巧妙使用 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>