CSS 制作波浪效果的思路

1. 前言

CSS 是前端开发中不可或缺的技术，通过 CSS 可以实现各种酷炫的效果。本文将为大家讲解如何使用 CSS 制作波浪效果。

2. 实现思路

实现波浪效果需要以下几个步骤：

2.1 使用伪元素来制作波浪

首先，我们需要创建一个主元素，在该主元素的内部通过伪元素来实现波浪效果。在 CSS 中，通过伪元素 ::before 和 ::after 可以为原始的 HTML 元素添加内容。我们需要利用这一点来创建波浪的形状。

/* 创建伪元素 */

.wave::before,
.wave::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
/* 设置波浪形状 */
.wave::before {
  border-radius: 50%;
  background-color: #fff;
  transform: translateY(-25%);
}
.wave::after {
  border-radius: 50%;
  background-color: #ccc;
  transform: translateY(-50%);
}

通过以上代码，我们创建了两个伪元素，分别用来显示白色和灰色。我们通过设置伪元素的圆角和背景色，让其在视觉上呈现出波浪形状。

2.2 让波浪动起来

上一步只是创建了波浪的形状，并没有实现波浪效果。接下来，我们需要将波浪动起来。实现方法是通过 CSS 动画，使用 transform: translateY() 来让伪元素上下移动。

/* 定义动画 */

@keyframes move {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(100%);
  }
}
/* 应用动画 */
.wave::before {
  animation: move 2s ease-in-out infinite;
}
.wave::after {
  animation: move 3s ease-in-out infinite;
}

通过以上代码，我们定义了一个名为 move 的动画，在动画中，波浪从初始位置上移 0% 到最终位置下移 100%，并在两秒或三秒内完成这个动画。我们将该动画应用于伪元素，让波浪动起来。

3. 小结

通过使用伪元素和 CSS 动画，我们成功地实现了波浪效果。本文中的代码只是其中一种实现方式，实际上还有很多种实现方式。希望本文对大家有所帮助。