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>