Loading字体组件往上加载效果

效果图：

html代码：

<div class="font">Loading</div>

 css代码：

<style>
    @keyframes loading {
      0% {
        height: 100%;
      }
      100% {
        height: 0%;
      }
    }
    .font {
      position: relative;
      font-size: 30px;
      font-weight: 700;
      color: tomato;
    }
    .font::before {
      position: absolute;
      top: 0;
      left: 0;
      height: 50%;
      content: 'Loading';
      font-size: 30px;
      font-weight: 700; 
      overflow: hidden;
      color: #f0f0f0;
      animation: loading 3s linear infinite;
    }
  </style>

原理：让白色字体高度逐渐变小，溢出部分隐藏，视觉上看起来就是字体往上逐渐加载。

改变的是高度的大小百分比。