CSS3 画飞鸽loading

好的，以下是用 CSS3 画飞鸽 loading 的示例代码：

HTML 代码：

<div class="loading">
  <div class="dove"></div>
  <div class="text">Loading...</div>
</div>

CSS 代码：

.loading {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 0 auto;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  color: #666;
}

.dove {
  position: absolute;
  top: 0;
  left: 0;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #f2f2f2;
  animation: fly 2s linear infinite;
}

.text {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
}

@keyframes fly {
  0% {
    transform: translate(0, 0) rotate(-45deg);
  }
  25% {
    transform: translate(20px, -20px) rotate(0);
  }
  50% {
    transform: translate(40px, 0) rotate(45deg);
  }
  75% {
    transform: translate(20px, 20px) rotate(90deg);
  }
  100% {
    transform: translate(0, 0) rotate(135deg);
  }
}

解释一下：

- 使用 `div` 元素来创建 loading，其中 `.loading` 为 loading 的主体，`.dove` 为飞鸽，`.text` 为 loading 文字。
- 使用 `position: relative` 让 `.loading` 成为相对定位的容器，使得 `.dove` 可以使用绝对定位。
- 使用 `margin: 0 auto` 让 `.loading` 水平居中。
- 使用 `font-size`、`font-weight`、`color` 设置文字的样式。
- 使用 `animation` 控制飞鸽的飞动。
- 使用 `@keyframes` 定义飞鸽的动画过程，其中 `transform: translate()` 控制飞鸽的位置，`transform: rotate()` 控制飞鸽的旋转。

希望这个示例对你有所帮助！