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;
  }
}

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