css动画——渐变文字

原理：

        给字体加个颜色变化动画，再给每个字设置animation-delay 属性（动画何时开始）

省流：

        <div class="ListBox">

                <div class="colorWord">明</div>

                <div class="colorWord">天</div>

                <div class="colorWord">，</div>

                <div class="colorWord">你</div>

                <div class="colorWord">好</div>

        </div>

.ListBox{

  display: flex;

  .colorWord{

    color:#0f499e;

    margin-right: 20px;

    animation: colorChange 1s infinite ease-in-out alternate;

  }

  @keyframes colorChange {

    to {

      color: #ec6f65;

    }

  }

  @for $i from 1 through 5 {        //重点：此处使用的是Sass，样式里面写for循环，5为文字个数

    .colorWord:nth-child(#{$i}){

      animation-delay: ($i - 1)*0.2s;

    }

  }

}