如何使用 CSS 创建 Wave Loader？

在网页设计和开发中，加载动画和加载器是非常重要的元素，特别是在移动设备和缓慢的互联网连接的情况下。CSS为我们提供了制作一些非常棒的加载动画和器的工具。在本文中，我们将学习如何使用CSS创建Wave Loader。

步骤

步骤一：HTML结构

首先，我们需要在HTML中创建一个loader的容器。我们可以使用div元素来创建容器，如下所示：

<div class="loader">
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
</div>

我们创建了一个名为“loader”的div容器，内部有四个名为“bar”的子元素。这些元素将用于创建Wave Loader的条形动画。

步骤二：CSS样式

要创建Wave Loader动画，我们需要使用CSS创建动画并将其应用到容器和子元素上。以下是所需的CSS代码：

.loader {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /*变量定义屏幕高度*/
}

.bar {
  width: 5px;
  height: 50px;
  margin-right: 3px;
  border-radius: 3px;
  animation: wave 1s ease-in-out infinite;
}

.bar:nth-child(1) {
  animation-delay: 0.2s;
}

.bar:nth-child(2) {
  animation-delay: 0.4s;
}

.bar:nth-child(3) {
  animation-delay: 0.6s;
}

.bar:nth-child(4) {
  animation-delay: 0.8s;
}

@keyframes wave {
  50% {
    transform: translateY(15px);
  }
}

让我们一步一步分解CSS代码的工作原理：

第一段代码中，我们创建了一个高100vh的Loader容器，使其显示在屏幕中间。

.loader {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

接下来，我们设置条形动画的样式。我们使用“bar”类选择器为每个条形定义了以下属性：

.bar {
  width: 5px;
  height: 50px;
  margin-right: 3px;
  border-radius: 3px;
  animation: wave 1s ease-in-out infinite;
}

我们设置了条形的高度、宽度、间距和圆角。我们通过动画属性定义了一个称为“wave”的动画，该动画将应用于每个条形上。我们还将动画的执行时间设置为1秒，并将动画设置为无限循环。

我们使用“nth-child”伪类选择器为每个条形元素指定动画延迟。这将使每个条形动画在不同的时间开始，从而创建波浪效果。

.bar:nth-child(1) {
  animation-delay: 0.2s;
}

.bar:nth-child(2) {
  animation-delay: 0.4s;
}

.bar:nth-child(3) {
  animation-delay: 0.6s;
}

.bar:nth-child(4) {
  animation-delay: 0.8s;
}

最后，我们使用“@keyframes”规则创建动画本身。我们定义了名为“wave”的动画，该动画从0%到50%将条形向上移动15像素，然后从50%到100%向下移动15像素。

@keyframes wave {
  50% {
    transform: translateY(15px);
  }
}

结论

在本文中，我们学习了如何使用CSS创建Wave Loader。通过创建“bar”元素、应用动画和设置延迟，我们能够创建出一个漂亮的加载动画。快去试试吧！