纯css炫酷loding

以下是一个简单的纯 CSS 实现的 loading 效果示例：

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

.loading {
  display: flex;
  justify-content: center;
}

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

.loading-dot:nth-of-type(1) {
  animation-delay: 0.1s;
}

.loading-dot:nth-of-type(2) {
  animation-delay: 0.2s;
}

.loading-dot:nth-of-type(3) {
  animation-delay: 0.3s;
}

.loading-dot:nth-of-type(4) {
  animation-delay: 0.4s;
}

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

具体实现思路是：用一个 `div` 包裹四个小圆点，通过 `flex` 布局使它们水平居中对齐，然后通过 `animation` 属性实现点的动画效果。

这个示例的效果是四个小圆点不断放大和缩小，形成了一个简单的 loading 效果。你可以根据需要调整样式和动画效果。