还不会动态渐变文字，试试这几种解决方案！之前整了一篇，文字效果的文章,总感觉缺少了一些灵动，所以我产生了动态文字的想法，

这是我参与11月更文挑战的第11天，活动详情查看：2021最后一次更文挑战

大家好，我是半夏👴，一个刚刚开始写文的沙雕程序员.如果喜欢我的文章，可以关注➕ 点赞 👍 加我微信：frontendpicker，邀你进群，一起学习交流前端，成为更优秀的工程师～关注公众号：半夏话前端,了解更多前端知识！点我探索新世界！

前言

之前整了一篇，文字效果的文章：juejin.cn/post/702895…

缺少了一些灵动，所以我产生了动态文字的想法，这一实现，我发现动态文字真好玩。CSS的属性是丰富的，一种效果往往不只一种解决方案。

canvas

主要是利用CanvasRenderingContext2D.createLinearGradient()方法来实现。CanvasRenderingContext2D.createLinearGradient()主要是创建一个沿着参数左边的直线渐变。

创建一个canvas

<canvasid="gradient-text"></canvas>

创建2d的画板

 var gradientText= document.getElementById("gradient-text");
 var ctx = gradientText.getContext("2d");

创建渐变，设置渐变颜色的位置。

gradient.addColorStop("0", "#56ecc7");
gradient.addColorStop("0.5", "#9f5ad8");
gradient.addColorStop("1", "#56ecc7");

填充文字

ctx.fillText("我是动态渐变的文字！", 0, 30);

使用canvas的方法代码不是很多，而且也是也比较简单，但是我觉得不太好的地方，就是如图想实现动态渐变的文字的话，比较浪费性能，所以不推荐。

background

这种方法只要是靠background可以设置线性渐变实现的。同时利用background-clip:text；将背景裁剪为文字的前景色。

设置渐变

     background: -webkit-linear-gradient(
          0deg,
          #56ecc7,
          #9f5ad8 25%,
          #56ecc7 50%,
          #9f5ad8 75%,
          #56ecc7
        );

裁剪渐变
```
 -webkit-background-clip: text;
```
将文字的颜色设置为透明，然后就可以将背景显示出来
```
color: transparent;
```
此时文字的颜色已经是渐变。

为了文字的渐变我们加上一点动画，因为是背景，所以最简单的方法就是设置背景的位置。

@-webkit-keyframes gradient-text {
    0% {
        background-position: 0 ;
        }
    100% {
        background-position: 100% ;
        }
}

动态渐变文字

mask+attr

这种实现方式主要是利用了attr。attr属于css表达式，主要是用来获取html属性值。并且用于样式。-webkit-mask是-webkit内核浏览器独有的，它可以同样可以设置渐变。

这种方法的思路是，使用伪元素，在伪元素上设置渐变，然后将伪元素覆盖在源文字上面，产生效果。

例如下面这个例子，p是紫色，伪元素是绿色的渐变，这个渐变最后设置了一个透明，目的是为了让p的紫色也能显示一部分，达到渐变的效果。

p {
    font-size: 80px;
    position: relative;
    color:#9f5ad8;
}

p::after {
    content: attr(data-text);
    color: #56ecc7;
    position: absolute;
    left: 0;
    z-index: 2;
    -webkit-mask: linear-gradient(to right, #56ecc7 10%, transparent );
    -webkit-mask-position: right;
}

同样的，这种方法也可以设置动态的渐变颜色。通过改变渐变颜色的位置，可以实现动态的文字渐变。例如这样：