css3动画波浪效果

CSS3动画波浪效果可以通过使用CSS的`@keyframes`规则和`animation`属性来实现。我们需要创建一个带有波浪效果的元素，然后使用CSS动画来使波浪动起来。

我们需要创建一个波浪的容器元素，并设置其宽度和高度。然后，我们可以使用`::before`和`::after`伪元素来创建波浪的形状。通过设置伪元素的宽度和高度，我们可以控制波浪的大小。接下来，我们可以使用`border-radius`属性来设置波浪的圆角，使其看起来更加平滑。

.wave-container {
  position: relative;
  width: 300px;
  height: 150px;
  background-color: #eef0f2;
}
.wave-container::before,
.wave-container::after {
  content: "";
  position: absolute;
  bottom: 0;
}
.wave-container::before {
  width: 100%;
  height: 50px;
  background-color: #f8fafc;
  border-radius: 50% 50% 0 0;
}
.wave-container::after {
  width: 100%;
  height: 60px;
  background-color: #eef0f2;
  border-radius: 50% 50% 0 0;
}

现在，我们已经创建了一个波浪的容器，接下来我们将使用CSS动画来使波浪动起来。我们可以使用`@keyframes`规则来定义动画的关键帧。在这个例子中，我们将创建一个从左到右的波浪动画，使波浪在容器内移动。

@keyframes wave-animation {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}
.wave-container {
  animation: wave-animation 2s linear infinite;
}

在上面的代码中，我们定义了一个名为`wave-animation`的关键帧动画。在动画的起始帧（0%）和结束帧（100%）中，我们使用`transform`属性来设置波浪的水平位移。通过将`transform`的`translateX`值从0变化到100%，我们可以使波浪在容器内从左到右移动。

我们将动画应用到波浪容器上，使用`animation`属性来指定动画的名称、持续时间、动画速度和重复次数。在这个例子中，我们将动画名称设置为`wave-animation`，持续时间设置为2秒，动画速度设置为线性，重复次数设置为无限循环。

通过以上的代码，我们实现了一个简单的CSS3动画波浪效果。你可以根据需要调整容器的大小、颜色和动画的参数来创建不同的波浪效果。这个例子也展示了如何使用`@keyframes`规则和`animation`属性来创建其他类型的CSS动画效果。