CSS3实现10种Loading效果

CSS3实现10种Loading效果具体实现过程如下：

第一步：HTML结构

先在HTML中定义一个包含所有Loading效果的div容器，然后为每个效果定义一个独立的div。如下所示：

<div class="loading-container">
  <!-- 第一种效果 -->
  <div class="loading1"></div>
  <!-- 第二种效果 -->
  <div class="loading2"></div>
  <!-- 第三种效果 -->
  <div class="loading3"></div>
  <!-- 其他样式依次类推 -->
</div>

第二步：CSS样式

接下来需要为Loading效果定义CSS样式。如下所示：

/* Loading效果容器样式 */
.loading-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 50px;
}

/* 第一种Loading效果 */
.loading1 {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: #333;
  animation: loading1 1.2s ease-in-out infinite;
}

@keyframes loading1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

/* 第二种Loading效果 */
.loading2 {
  width: 60px;
  height: 60px;
  border: 5px solid #333;
  border-top-color: #eee;
  border-radius: 50%;
  animation: loading2 1.2s linear infinite;
}

@keyframes loading2 {
  to {
    transform: rotate(360deg);
  }
}

/* 第三种Loading效果 */
.loading3 {
  width: 80px;
  height: 80px;
  border: 5px solid transparent;
  border-top-color: #333;
  border-radius: 50%;
  animation: loading3 1.2s linear infinite;
}

@keyframes loading3 {
  to {
    transform: rotate(360deg);
  }
}

如上所示，这是三个Loading效果的定义样式。在第一种效果中，我们定义了一个圆形的小球，它会以一定的速率不断地缩放和消失，形成一个放大缩小的效果。在第二种效果中，我们仿照DVD的样式，定义了一个带有边框的圆环，它会以一定的速率沿着自身的一个半径旋转，形成一个旋转的菊花效果。在第三种效果中，我们定义了一个带有透明边框的圆环，随着一定的速率不断旋转，效果类似于一个loading条。

第三步：HTML引入CSS

最后将CSS通过link标签引入到HTML文件中，代码如下：

<link rel="stylesheet" href="loading.css">

示例

示例一：

演示地址：https://codepen.io/solitude233/pen/RwWKbKy

代码：https://codepen.io/solitude233/pen/RwWKbKy

示例二：

演示地址：https://codepen.io/solitude233/pen/RwWKepr

代码：https://codepen.io/solitude233/pen/RwWKepr

以上是CSS3实现10种Loading效果的完整攻略，其中包含了两个示例说明。