使用 CSS 的卡通动画加载器

是什么？

卡通动画加载器是一种使用 CSS 动画的加载器。它通过在页面加载期间展示动画来让用户知道页面正在加载。

如何使用？

要使用卡通动画加载器，您需要使用 HTML 和 CSS。

HTML 代码应该像这样：

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

CSS 代码应该像这样：

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

.loader__bar {
  width: 10px;
  height: 40px;
  margin: 0 5px;
  background-color: #333;
  animation: loader .8s infinite alternate;
  animation-delay: calc(var(--i) * .1s);
}

@keyframes loader {
  0% {
    height: 40px;
  }
  50% {
    height: 20px;
  }
  100% {
    height: 40px;
  }
}

如何自定义？

您可以自定义卡通动画加载器的颜色和大小。要更改颜色，您可以更改 .loader__bar 的 background-color 属性。要更改大小，您可以更改 .loader__bar 的 width 和 height 属性。

结论

卡通动画加载器是一种使用 CSS 动画的加载器，它可以让用户知道页面正在加载。它非常简单，并且可以通过自定义来满足您的需求。