本文将介绍如何使用纯CSS实现一个有趣的Loading特效。这个特效将展示9个圆圈在不断闪烁，看起来非常有趣。

HTML结构

首先，我们需要在HTML中创建9个圆圈的结构。这可以通过使用div元素并给它们不同的类名来实现。以下是HTML代码：

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

CSS样式

接下来，我们需要使用CSS样式来使这些圆圈闪烁。我们将使用关键帧动画来实现这个效果。以下是CSS代码：

.loading,
.loading > div {
  position: relative;
  box-sizing: border-box;
}

.loading {
  display: block;
  font-size: 0;
  color: #000;
}

.loading.la-dark {
  color: #333;
}

.loading > div {
  display: inline-block;
  float: none;
  background-color: currentColor;
  border: 0 solid currentColor;
}

.loading {
  width: 36px;
  height: 36px;
}

.loading > div {
  width: 8px;
  height: 8px;
  margin: 2px;
  border-radius: 100%;
  animation-name: ball-grid-beat;
  animation-iteration-count: infinite;
}

.loading > div:nth-child(1) {
  animation-duration: 0.65s;
  animation-delay: 0.03s;
}

.loading > div:nth-child(2) {
  animation-duration: 1.02s;
  animation-delay: 0.09s;
}

.loading > div:nth-child(3) {
  animation-duration: 1.06s;
  animation-delay: -0.69s;
}

.loading > div:nth-child(4) {
  animation-duration: 1.5s;
  animation-delay: -0.41s;
}

.loading > div:nth-child(5) {
  animation-duration: 1.6s;
  animation-delay: 0.04s;
}

.loading > div:nth-child(6) {
  animation-duration: 0.84s;
  animation-delay: 0.07s;
}

.loading > div:nth-child(7) {
  animation-duration: 0.68s;
  animation-delay: -0.66s;
}

.loading > div:nth-child(8) {
  animation-duration: 0.93s;
  animation-delay: -0.76s;
}

.loading > div:nth-child(9) {
  animation-duration: 1.24s;
  animation-delay: -0.76s;
}

@keyframes ball-grid-beat {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.35;
  }

  100% {
    opacity: 1;
  }
}

我们首先设置了一个圆圈容器 .loading，使其垂直居中。然后，我们创建了一堆div样式，这将是所有圆圈的基本样式。接下来，我们为每个圆圈设置了不同的背景颜色，并为它们添加了一个名为ball-grid-beat的关键帧动画。这个动画将使圆圈在1秒内从不透明到半透明来回变化。

最后，我们定义了这个动画的关键帧。我们将圆圈的不透明度从1降到0.35，然后在动画返回时恢复到1。

结论

通过使用HTML和CSS，我们已经成功地创建了一个有趣的Loading特效，其中9个圆圈不断闪烁。您可以在自己的网站或项目中使用这个特效，以增加用户体验和视觉吸引力。