css3实现loading点的加载动画

可以使用CSS3的伪元素和动画属性来实现loading点的加载动画，以下是一个简单的示例：

HTML代码：

<div class="loading">
  <div></div>
  <div></div>
  <div></div>
</div>

CSS代码：

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

.loading div {
  width: 10px;
  height: 10px;
  margin: 0 5px;
  border-radius: 50%;
  background-color: #000;
  animation: loading 0.8s ease-in-out infinite;
}

.loading div:nth-child(2) {
  animation-delay: 0.2s;
}

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

@keyframes loading {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}

解释一下：

- 父元素 `.loading` 使用 flex 布局，居中子元素；
- 子元素 `.loading div` 是三个小圆点，通过 `margin` 和 `border-radius` 等属性设置样式；
- 使用 `animation` 属性定义动画，并通过 `animation-delay` 属性设置不同的延迟时间，让三个小圆点错开；
- `@keyframes` 规则定义动画的关键帧，通过 `transform: scale()` 属性控制圆点的大小，实现点的出现和消失效果；
- 最后，把三个小圆点放到一个父元素中，就可以实现loading点的加载动画了。

希望这个示例能够帮到你。