html实现loding动画

好的，可以使用CSS实现loading动画，以下是一个例子：

HTML:

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

CSS:

.loading {
  border: 8px solid #f3f3f3;
  border-top: 8px solid #3498db;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 2s linear infinite;
  margin: 0 auto;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

这段代码可以生成一个带有loading动画的圆圈。

相关问题

纯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 效果。你可以根据需要调整样式和动画效果。