Recently, some students asked how to use CSS to achieve the following effects:

It looks like an interesting kinetic effect.

If you think about it, there’s only one core property you can use to achieve this effect: background-clip: text.

Background-clip: text

Background-clip: text Its core is to take the text in the block as the clipping area to cut out, the background of the text is the block background, the area outside the text will be clipped out.

In simple terms, the element of background-clip: text is used, and the background content of the text is only reserved in the area where the text is, and the transparent text color: transparent is used to reveal the background.

Using background-clip: text, you can get a lot of interesting text effects.

Suppose we have a Gif that looks like this:

We can use this GIF and text to create a text version of the GIF:

<p>Lorem ......</p>
Copy the code
p {
  color: transparent;
  background: url(https://media.giphy.com/media/Ju7l5y9osyymQ/giphy.gif) center/cover;
  background-clip: text;
}
Copy the code

We achieved this effect:

CodePen Demo — Rick Roll Knockout Text

The above effects and ideas can be applied to the effect at the beginning:

  1. Implement a background animation
  2. When hover to text, make text transparent
  3. Let the animation begin

We first need to implement a moving stripe background animation. There are many ways to do this. Here I used repeating-radial-gradient with CSS @Property:

<p></p>
Copy the code
@property --offset {
  syntax: '<length>';
  inherits: false;
  initial-value: 5px;
}
p {
  background: repeating-radial-gradient(circle at 0 0 , # 000 calc(var(--offset) - 5px), # 000 var(--offset), #fff var(--offset), #fff calc(var(--offset) + 5px));
    animation: move .5s infinite linear;
}
@keyframes move {
    to {
        --offset: 15px; }}Copy the code

You get something like this:

Of course, if you feel that using CSS to implement a Gif is cumbersome or there will be compatibility problems, you can also use some ready-made GIFs instead, such as this Gif as the background of the

element:

Now that we have the moving effect, we modify the code slightly by using background-clip: text and the hover effect of the

element. In hover, we change the text from #000 to transparent:

.p {
    color: # 000;
    
    &:hover {
        color: transparent;
        background: repeating-radial-gradient(circle at 0 0 , # 000 calc(var(--offset) - 5px), # 000 var(--offset), #fff var(--offset), #fff calc(var(--offset) + 5px));
        background-clip: text;
        animation: move .5sinfinite linear; }}...Copy the code

In this way, we have successfully achieved the effect shown in the picture above:

CodePen Demo — BackgroundClip Wave Text

Combine filter and blend mode to create different sparks

Is it over? No!

With that in mind, CSS has two very interesting properties: filter and mix-blx-mode. We think about applying them to our effects.

Again, this Gif:

First, filter: grayscale(1) and change it from color to black, white and gray:

p {
    background: url(xxx);
    filter: grayscale(1);
}
Copy the code

The resulting image would look something like this:

Based on an image with a black and white background, we use background-clip: text and mix-blending-mode: hard-light, and it is very important that we put this effect on the black background:

body {
  background: # 000;
}
p {
  color: transparent;
  background: url(xxx) center/cover;
  background-clip: text;
  filter: grayscale(1);
  mix-blend-mode: hard-light;
}
Copy the code

The magic result is that the light parts of the text will remain and the dark parts will blend with the black background through the overlay of blend mode:

Here, mix-blending-mode: hard-light plays a very important role. If removed, the result is as follows:

Of course, we would prefer that the human part of the display remain, but the background part of the Gif is hidden, perfect!

In this case, we want to optimize the code to replace the light and dark parts of the original image processed by Grayscale (). In the filter, there is an invert() function that inverts the color value of the input image.

So after grayscale(), coordinate invert(1) again:

body {
  background: # 000;
}
p {
  color: transparent;
  background: url(xxx) center/cover;
  background-clip: text;
  filter: grayscale(1) invert(1);
  mix-blend-mode: hard-light;
}
Copy the code

OK, so far we’ve implemented this unbelievable text with pure CSS:

CodePen Demo – Filter & MixBlendMode & BackgroundClip Text Animation Effect

With this technique, as long as we have the material, we can let our imagination fly and achieve all kinds of similar interesting effects.

The last

Well, the end of this article, I hope to help you 🙂

Want to Get the most interesting CSS information, do not miss my public account – iCSS front-end interesting news 😄

More interesting CSS technology articles are summarized in my Github — iCSS, constantly updated, welcome to click on the star subscription favorites.

If there are any questions or suggestions, you can exchange more original articles, writing is limited, talent and learning is shallow, if there is something wrong in the article, hope to inform.