开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第2天，点击查看活动详情

前置知识

baground-clip:text

background-clip属性规定背景的绘制区域。在W3C标准的它有三个值:　 border-box　|　padding-box　|　content-box;
字面上来理解分别是 以盒边界来裁剪 | 以内边距为边界来裁剪 | 以内容区域来裁剪

background-clip: text; 顾名思义就是以文字的范围来裁剪背景图片。

需要注意的是background-clip: text只兼容chrome,要想兼容其他浏览器就要用: -webkit-background-clip: text;

webkit-text-fill-color

文字填充色，-webkit-text-fill-color: transparent可以用来设置镂空字体；

linear-gradient

linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。

创建一个线性渐变，需要指定两种颜色，还可以实现不同方向（指定为一个角度）的渐变效果，如果不指定方向，默认从上到下渐变。

@keyframes

使用@keyframes规则，你可以创建动画。

创建动画是通过逐步改变从一个CSS样式设定到另一个。

指定的变化时发生时使用％，或关键字"from"和"to"，这是和0％到100％相同。

0％是开头动画，100％是当动画完成。

为了获得最佳的浏览器支持，您应该始终定义为0％和100％的选择器

第一步：实现彩虹字

.gradient-text {
    color: transparent;
    background: -webkit-linear-gradient(30deg, #32c5ff 25%, #b620e0 50%, #f7b500 75%, #20e050 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: auto;
}

第二步：实现滚动效果

所谓滚动效果，其实就是背景色的偏移。

@keyframes gradientText {
    0% {
        background-position: 0;
    }
    100% {
        background-position:24000px;
    }
}
.gradient-text {
    color: transparent;
    background: -webkit-linear-gradient(30deg,#f7b500 0%, #32c5ff 25%, #b620e0 50%, #f7b500 75%, #20e050 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: auto;
    animation: gradientText 300s infinite linear;
    -webkit-animation: gradientText 300s infinite linear;
}

效果如下：

彩虹动效.gif

动态彩虹渐变字效果简单实现