CSS文字连续光影特效

<template>
  <div class="container">
    <span>e</span>
    <span>安</span>
    <span>惠</span>
    <span>陪</span>
    <span>诊</span>
    <span>服</span>
    <span>务</span>
    <span>平</span>
    <span>台</span>
  </div>
</template>

<style lang="scss" scoped>
.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  span {
    font-size: 32px;
    color: #faebd7;
    animation: colorChange 1s infinite alternate;
  }
}

@keyframes colorChange {
  to {
    color: #ff0266;
  }
}

@for $i from 1 through 9 {
  span:nth-child(#{$i}) {
    animation-delay: ($i - 1) * 0.2s;
  }
}
</style>