场景

场景需求是对于动态的几个字符，从左到右，对文字进行染色。

  1. 动画，从左到右
  2. 文字需要染色，可纯色或者渐变色

思路

  1. 文字染色，能控制的是 color 属性， 但 color 无法动画过渡
  2. 能过渡的属性，一般用背景色
  3. 背景色的话，会把整个背景染色，无法单独染色文字而不影响默认背景色

需要的一个属性，能染色文字而不影响背景色
-webkit-background-clip: text;

那么，如果不用这个属性，怎么实现呢 ？

思路：

  1. 用图片替代文字
    需要满足条件： 字符数量可控
    同时，没有染色的过渡效果，可以考虑降级用透明度过渡

  2. 用绝对定位的小块拼凑字符，然后根据时间，加上class进行过渡
    同样，需要满足字符数量可控。
    实现上，可控的字符需要绝对定位就行拼凑，切换class进行过渡，每个字符需要单独进行顺序控制，实现繁琐。