css loading 字体动画效果

您可以使用CSS3的@keyframes规则和animation属性来创建一个字体加载动画效果。以下是一个简单的例子：

HTML代码：

<div class="loading">
  <span>L</span>
  <span>O</span>
  <span>A</span>
  <span>D</span>
  <span>I</span>
  <span>N</span>
  <span>G</span>
</div>

CSS代码：

.loading span {
  display: inline-block;
  font-size: 36px;
  font-weight: bold;
  animation: loading 1s ease-in-out infinite;
}

@keyframes loading {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  50% {
    transform: translateY(-20px);
    opacity: 0.5;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

这个动画会让每个字母在垂直方向上来回移动，从而创建一个加载的效果。您可以根据自己的需求修改动画的属性，例如动画持续时间、延迟时间、移动距离、透明度等等。

相关问题

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()` 控制飞鸽的旋转。

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

如何更改loading运行时的效果颜色

要更改 loading 运行时的效果颜色，你可以使用 CSS 来自定义 loading 动画的样式。以下是一个示例，展示如何使用 CSS 来更改 loading 运行时的效果颜色：

<button type="submit" class="custom-button" :disabled="loading" @click="feedbackSubmit">
  <span class="loading-animation"></span>
  <label>提交</label>
</button>

.custom-button {
  position: relative;
  background-color: blue;  /* 设置背景颜色为蓝色 */
  color: white;  /* 设置文字颜色为白色 */
}

.loading-animation {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  border: 2px solid blue;  /* 设置边框颜色为蓝色 */
  border-top-color: transparent;  /* 设置顶部边框颜色为透明 */
  border-radius: 50%;
  animation: spin 1s linear infinite;  /* 设置旋转动画 */
}

@keyframes spin {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

在上面的示例中，我们给按钮添加了一个自定义的 class 名称 `custom-button`，并在按钮内部添加了一个 span 元素并赋予其 `loading-animation` class 名称。然后，在 CSS 中使用这个 class 选择器来设置 loading 动画的样式。在这个示例中，我们将 loading 动画的边框颜色设置为蓝色，并应用旋转动画效果。

你可以根据需要修改 CSS 中的颜色值来得到你想要的 loading 运行时的效果颜色。你可以使用颜色名称或十六进制值来表示颜色。

记得将上述 CSS 代码添加到你的样式表中，或者直接在 HTML 文件的 `<style>` 标签内添加。

这只是一个简单的示例，你可以根据自己的需求修改 CSS 样式来实现你想要的 loading 运行时的效果颜色。