如何使用 CSS 创建 Wave Loader？

如果您正在寻找一种在加载时为您的网站增加一些动画效果的方法，您可以尝试创建波浪式加载器。下面是一个简单的教程，向您展示如何使用CSS创建一个波浪式加载器。

步骤

第一步：HTML

首先，您需要在HTML页面中创建一个容器，用于容纳您的加载器：

<div class="wave-loader">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

第二步：CSS

接下来，您需要添加CSS以创建波浪式加载器。以下是基本的CSS样式，可用来创建波浪式加载器：

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

.wave-loader div {
  width: 10px;
  height: 40px;
  margin: 0 4px;
  background-color: #fff;
  border-radius: 5px;
  animation: wave-loader-animation 0.75s ease-in-out infinite;
}

.wave-loader div:nth-child(2) {
  animation-delay: -0.6s;
}

.wave-loader div:nth-child(3) {
  animation-delay: -0.4s;
}

.wave-loader div:nth-child(4) {
  animation-delay: -0.2s;
}

@keyframes wave-loader-animation {
  0%, 60%, 100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-20px);
  }
}

第三步：调整样式

您可以使用这些基本样式作为起点，并对其进行调整以适应您的设计需求。例如，您可以更改动画持续时间、波形高度、间距、背景颜色等等。

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

.wave-loader div {
  width: 10px;
  height: 40px;
  margin: 0 6px;
  background-color: #0d53bc;
  border-radius: 5px;
  animation: wave-loader-animation 0.9s ease-in-out infinite;
}

.wave-loader div:nth-child(2) {
  animation-delay: -0.7s;
}

.wave-loader div:nth-child(3) {
  animation-delay: -0.5s;
}

.wave-loader div:nth-child(4) {
  animation-delay: -0.3s;
}

.wave-loader div:nth-child(5) {
  animation-delay: -0.1s;
}

@keyframes wave-loader-animation {
  0%, 60%, 100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-30px);
  }
}

结论

现在，您已经创建了一个波浪式加载器，并学会了如何自定义它。这是一种很酷的效果，在许多网站上看起来很好，可以吸引访客的注意力。现在，您可以把这个加载器集成到您的网站中，让您的用户感到更加愉快。