To be honest, CSS3 is getting more powerful, and you can do more and more unexpected things with CSS.

Today, I saw someone using CSS3 to achieve the photoshop mask effect, as shown below:

Realize the principle of

This animation, in fact, is not complicated. It uses background-clip to achieve the effect of the text mask, and then combines the animation of the background image to achieve the animation of the text mask as shown above.

Mask effect with CSS3

There are two common, one is graphic, the other is text.

Graphics mask

Clip-path is used to preserve the remaining area according to the contour of the shape you specify. If the shape you specify is a circle, the remaining area is a circle.

One of its features is that you can define your box model as an irregular shape.

We all know that the original CSS only allowed us to define elements as rectangles and squares, and to nest other rectangles or square elements within the rectangular area. Now we can define an irregular shape and then define other elements within that irregular shape.

That may be a little vague. If you fill an element with text that previously could only be filled along the edges of a rectangle or square, clip-path now fills text along the edges of an irregular shape.

Refer to text surround for details

Moving on to graphic masks, there are two implementations:

One is to retain the content in the silhouette of the clipped graph, which can be referred to as shpape-masking.

The Reverse clip path can be used to preserve the content outside the clipping diagram. This animation effect is combined with the background GIF and video, of course you can also use cSS3 animation.

Text mask

Backgorund-clip in CSS3 is used for text mask. This attribute supports border-box, padding-box, content-box, and text. For details, see MDN background-clip.

It has the same effect as clip, which is the remaining content after clipping. The value of text is special, which refers to the text inside the element, while other values refer to the display area of the content inside the element.

The background animation is simply an animation.

Example: Merry Christmas