本文将介绍如何使用纯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个圆圈不断闪烁。您可以在自己的网站或项目中使用这个特效，以增加用户体验和视觉吸引力。