CSS微动画 - Loading来了！终於要出款文字版本的了！

Q: 说好的文字Loading呢？
A: 客倌这里上菜罗～

前几篇的Loading都是以图案循环为主，今天比较特别要来做文字版本的Loading，文字可以随着使用者的需求任意改变～本篇一样当作Loading系列来做介绍，开始吧！

既然是文字，就要来上字啦！

本篇的Loading需要两个元素，文字相同且有共用的class，并有不同的class可以对文字做样式的修改。

1. 首先需要一个.container将文字的元素都包在一起。
2. 将两组文字的font-size、font-weight、letter-spacing、均设置相同。
3. 两组文字的颜色样式设置不同。

<style>
  .text {
    white-space: nowrap;
    font-size: 40px;
    font-weight: bold;
    letter-spacing: 5px;
  }
  .text-background {
    color: White;
    text-shadow: 0 0 6px #DDA0DD;
  }
  .text-color {
    color: MediumOrchid;
  }
</style>

<div class="container">
  <div class="text text-background">Loading . . .</div>
  <div class="text text-color">Loading . . .</div>
</div>

定位很好用！

再来要将文字重叠，这时候就要用到定位。

<style>
  .container {
    position: relative;
  }
  .text-color {
    position: absolute;
    left: 0;
    top: 0;
  }
</style>

容器给宽度，文字不换行！

再来就要对.text-color设置宽度，希望如果只有width: 50%时，只显示文字的一半，接下来的设置就很重要了！

1. 为了达到这个效果，须将.container改为inline-block。
2. 让.text无论如何死都不换行就要下white-space: nowrap。
3. 最後对.text-color设置宽度，并且要有overflow: hidden把超出容器的都隐藏。

<style>
  .container {
    display: inline-block;
  }
  .text {
    white-space: nowrap;
  }
  .text-color {
    width: 50%;
    overflow: hidden;
  }
</style>

<div class="container">
  <div class="text text-background">Loading . . .</div>
  <div class="text text-color">Loading . . .</div>
</div>

再来就可以用animation来做动画效果

<style>
  .text-color {
    animation: widthChange 3s infinite;
  }

  @keyframes widthChange {
    0% {
      width: 0;
    }
    100% {
      width: 100%;
    }
  }
</style>

文字Loading完成！

将文字替换掉也是可以的！！

如果有写错的地方，欢迎点评！ 会及时改进～
如果有更好的写法，欢迎指教！ 希望各位不吝赐教～
如果想看更多效果，欢迎敲碗！ 提供示意图小编写写看～
如果内容疑似侵权，拜托告知！ 内容皆为小编理解後原创～
如果对你有点帮助，拿去用吧！