本文已参与「新人创作礼」活动，一起开启掘金创作之路。 点击查看活动详情
写在前面
产品：页面这里的标题颜色要用五彩斑斓的黑。
我：...
产品：实现不了？
我：要不你还是让我看看五彩斑斓的黑是啥样的，让我开开眼。
产品：那就简单点，弄成五彩斑斓的效果就行了。
实现思路
一提到五彩斑斓我就想到了CSS的渐变色效果
background: -webkit-linear-gradient(left,
#ffffff,
#ff0000 6.25%,
#ff7d00 12.5%,
#ffff00 18.75%,
#00ff00 25%,
#00ffff 31.25%,
#0000ff 37.5%,
#ff00ff 43.75%,
#ffff00 50%,
#ff0000 56.25%,
#ff7d00 62.5%,
#ffff00 68.75%,
#00ff00 75%,
#00ffff 81.25%,
#0000ff 87.5%,
#ff00ff 93.75%,
#ffff00 100%);
可是这个一般用于背景色，怎么把这个效果弄到字体上呢？
查了一下资料，发现了一个属性background-clip可以设置元素的背景，把属性设为background-clip: text后，可以设置以文字的范围裁剪背景图片，只要设置了这个属性，文字范围内的背景颜色就失效了。
background: red;
-webkit-background-clip: text;
会发现文字范围内的背景色是被盖住了的
既然这个属性是以文字范围来遮盖原有的背景色，那我们把文字颜色设成透明，不就可以露出后面的渐变背景色了吗
background: -webkit-linear-gradient(left,
#ffffff,
#ff0000 6.25%,
#ff7d00 12.5%,
#ffff00 18.75%,
#00ff00 25%,
#00ffff 31.25%,
#0000ff 37.5%,
#ff00ff 43.75%,
#ffff00 50%,
#ff0000 56.25%,
#ff7d00 62.5%,
#ffff00 68.75%,
#00ff00 75%,
#00ffff 81.25%,
#0000ff 87.5%,
#ff00ff 93.75%,
#ffff00 100%);
-webkit-background-clip: text;
color: transparent;
这样通过透明的文字，露出文字范围内的渐变色背景，就形成了渐变的文字效果了
加上动画效果
你以为这就完了？这个时候我们给背景加上动画，开启闪瞎氪金眼效果。让背景不断的移动，从文字里露出的部分不断变化，最终形成文字动画效果。
@keyframes act-colorful {
0% {
background-position: 0 0;
}
100% {
background-position: -100%, 0;
}
}
实际的动画效果是很流畅的，这里的闪动是因为gif重新播放导致的
