This is the 11th day of my participation in the Gwen Challenge in November. Check out the details: The last Gwen Challenge in 2021

Hi, I’m Banxia 👴, a sand sculptor who has just started writing. If you like my article, you can follow ➕ like 👍 plus my wechat: FrontendPicker, invite you to join the group, learn to communicate frontend, become a better engineer ~ follow the public number: Banxia words frontend, learn more frontend knowledge! Click me to explore a new world!

preface

Before the whole of a, text effect of the article: juejin.cn/post/702895…

Lacking some agility, SO I came up with the idea of dynamic text, and this implementation, I found dynamic text really fun. CSS properties are rich, and one effect often has more than one solution.

canvas

Mainly using CanvasRenderingContext2D. CreateLinearGradient () method to implement. CanvasRenderingContext2D. CreateLinearGradient () is mainly along the parameter to create a linear gradient on the left.

  1. Create a Canvas
<canvasid="gradient-text"></canvas>
Copy the code
  1. Create a 2D artboard
 var gradientText= document.getElementById("gradient-text");
 var ctx = gradientText.getContext("2d");
Copy the code
  1. Create a gradient and set the position of the gradient color.
gradient.addColorStop("0"."#56ecc7");
gradient.addColorStop("0.5"."#9f5ad8");
gradient.addColorStop("1"."#56ecc7");
Copy the code
  1. Fill the words
ctx.fillText("I'm dynamic gradient text!".0.30);
Copy the code

The method code of using Canvas is not very much, and it is relatively simple, but I think it is not good, that is, if you want to achieve dynamic gradient text in the picture, it will waste performance, so it is not recommended.

background

This method can be implemented with a linear gradient as long as the background is used. Use background-clip:text; Crop the background to the foreground of the text.

  1. Set the gradient
     background: -webkit-linear-gradient(
          0deg,
          #56ecc7,
          #9f5ad8 25%,
          #56ecc7 50%,
          #9f5ad8 75%,
          #56ecc7
        );
Copy the code

  1. Cut out the gradient

     -webkit-background-clip: text;
Copy the code

  2. Set the color of the text to transparent, and then the background will appear

    color: transparent;
Copy the code

    The color of the text is already gradient.

For the gradient of the text we add a little animation, because it is the background, so the easiest way is to set the position of the background.

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

mask+attr

This approach takes advantage of ATTR. Attr is a CSS expression that is used to get HTML attribute values. And for styles. -webkit-mask is unique to the -WebKit kernel browser, which can also be set to gradient.

The idea is to use pseudo-elements, set gradients on them, and then overlay the pseudo-elements on top of the source text to create the effect.

For example, in the following example, p is purple, and the fake element is a green gradient. At the end of this gradient, a transparency is set, so that part of p’s purple can also be displayed, so as to achieve the effect of gradient.

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;
}
Copy the code

This method also allows you to set dynamic gradient colors. Dynamic text gradient can be achieved by changing the position of the gradient color. For example: