如何使用 HTML 和 CSS 创建点加载动画？

简介

点加载动画是一种常用的进度指示器，用于告诉用户正在进行的操作需要时间。本文将介绍如何使用 HTML 和 CSS 创建点加载动画。

HTML

首先，我们需要创建一个包含点的 HTML 结构。我们可以使用无序列表（<ul>）和列表项目（<li>）来实现。

<ul class="dot-loader">
  <li></li>
  <li></li>
  <li></li>
</ul>

CSS

接下来，我们需要为这些点添加样式。实现点的动画效果可以使用 CSS 中的 @keyframes 规则，结合 animation 属性。为了实现更好的效果，我们还需要通过 transform 属性设置每个点的初始位置。

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

.dot-loader li {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 0 5px;
  border-radius: 50%;
  background-color: #ccc;
  transform: scale(0);
  animation: dot-loader 1s ease-in-out infinite;
}

@keyframes dot-loader {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  
  50% {
    transform: scale(1);
    opacity: 0.5;
  }
  
  100% {
    transform: scale(0);
    opacity: 1;
  }
}

细节解析

• 我们使用 display: flex、justify-content: center 和 align-items: center 将点放置在父容器的中心位置。
• 我们通过 transform: scale(0) 将每个点的大小设置为 0，以隐藏它们。
• 我们使用 animation 属性将 dot-loader 动画应用于每个点。
• 在 dot-loader 动画中，我们使用 transform 属性和 opacity 属性来设置点在动画过程中的状态，使它们从小变大再变小。
• 我们使用 ease-in-out 过渡，使点在动画开始和结束时变慢，中间变快。
• 我们使用 infinite 属性来让动画一直播放下去。

效果预览

最终效果如下图所示：

结语

通过这篇文章，您已经了解了如何使用 HTML 和 CSS 创建点加载动画，希望对您有所帮助。