请使用纯css实现波浪效果

可以使用纯 CSS 实现几种不同的波浪效果。以下列出三种常见方法，并提供代码示例：

1. 使用 border-radius 创建波浪:

这种方法最简单，通过交替使用大的圆角和小的圆角来模拟波浪形状。

.wave {
  width: 200px;
  height: 50px;
  background-color: lightblue;
  border-radius: 50% / 25px; /* 关键：垂直半径小于水平半径 */
}

.wave-double { /* 双波浪 */
  width: 200px;
  height: 50px;
  background-color: lightblue;
  border-radius: 50% / 25px 25px 0 0; /* 控制四个角的半径 */
}

2. 使用 ::before 和 ::after 伪元素创建波浪:

这种方法可以创建更复杂的波浪形状，通过控制伪元素的位置和形状来实现。

.wave-pseudo {
  position: relative;
  width: 200px;
  height: 50px;
  overflow: hidden;
  background-color: lightblue;
}

.wave-pseudo::before,
.wave-pseudo::after {
  content: "";
  position: absolute;
  left: 0;
  width: 200%; /* 宽度为父元素的两倍 */
  height: 100%;
  background-color: white; /* 波浪颜色 */
  border-radius: 45%; /* 创建圆形 */
  animation: wave 5s linear infinite; /* 动画 */
}

.wave-pseudo::after {
  right: 0; /* 将第二个伪元素移到右边 */
  left: auto;
  animation-delay: -2.5s; /* 设置动画延迟，使两个波浪交错 */
}

@keyframes wave {
  0% { transform: translateX(-25%); }
  100% { transform: translateX(25%); }
}

3. 使用 radial-gradient 创建波浪:

这种方法可以创建更平滑的波浪效果，通过径向渐变来模拟波浪的起伏。

.wave-radial {
  width: 200px;
  height: 50px;
  background: radial-gradient(circle at 10px 20px, transparent 20%, lightblue 21%) 50px 0,
              radial-gradient(circle at 40px 30px, transparent 20%, lightblue 21%) 50px 0;
  background-size: 100px 100%; /* 控制波浪宽度 */
  background-repeat: repeat-x; /* 横向重复 */
  animation: wave-radial 5s linear infinite;
}


@keyframes wave-radial {
  0% { background-position: 0 0; }
  100% { background-position: 100px 0; }
}