Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Interesting front-end CSS effects – wave text

Just saw a very interesting GIF picture, is a section of wave effect color text picture. I suddenly had the idea of using pure CSS to achieve this effect. The finished GIF is below.

1. First, think of the wave effect on the text as two circles with different rotations and set them to irregular circles by setting border-radius.

The main code is as follows

p::before,

p::after {

mix-blend-mode: screen;

content: "";

position: absolute;

border-radius: 45% 48% 43% 47%;

background: rgba(3, 169, 244, .85);

}

p::after {

border-radius: 43% 47% 44% 48%;

}

Copy the code

You have two irregular circles whose shapes do not overlap.

Add animation to the circle, and then position the two circles together to get the basic prototype of the wave

p::before,

p::after {

animation: rotate 10s infinite linear;

}

p::after {

animation: rotate 10s infinite .5s linear;

}

Copy the code

2. Add text to see the effect

Add the corresponding text to the P tag and adjust the size of the wave circle. The results are as follows

It’s not as good as we expected. So let’s go to the next step

3. Hide waves beyond the text

p{overflow: hidden; }

So the wave is the same width and height as the text, but you need to remove the part of the circle that goes beyond the text. There is a very important CSS property called mix-blending-mode that describes how the content of an element mixes with the content of its immediate parent and the background of the element.

Add the following CSS

p::before,

p::after {

mix-blend-mode: screen;

}

Copy the code

The result is shown as follows:

At this point, through the CSS hybrid mode characteristics, to get a wave text effect of pure CSS code on the clever completion.

The basic usage of hybrid mode can be found in the tutorial, so you can try different modes for yourself.

CSS can do a lot of special effects, and will continue to update other interesting CSS special effects code.