If you often watch live LOL matches, you must know that in some websites (Bilibili and Huya), when the characters and the bullet screen appear together, the bullet screen will “cleverly” hide under the characters, looking very intelligent.

A simple screenshot:

This is done using the MASK property in CSS.

Mask simple usage introduction

Mask has been mentioned in many previous articles, and the most detailed one is the fantastic CSS Mask. This article does not explain the basic concept of mask too much. When reading down, if you are confused about the use of some masks, you can go to see it again.

Here is a brief introduction to the basic use of mask:

The most basic way to use a mask is with a picture, something like this:

{
    /* Image values */
    mask: url(mask.png);                       /* Use bitmap to mask */
    mask: url(masks.svg#star);                 /* Use shapes in SVG graphics to mask */
}
Copy the code

Of course, the use of images will be covered later. In fact, the method of using pictures is quite tedious, because we need to prepare the corresponding image materials first. In addition to pictures, masks can also accept a parameter similar to background, that is, gradient.

Similar to the following usage:

{
    mask: linear-gradient(# 000Transparent) /* Use gradient mask */}Copy the code

So how exactly do you use it? For a very simple example, above we created a gradient from black to transparent, and we applied it to practice with code like this:

Here’s an image with a gradient from transparent to black,

{
    background: url(image.png);mask: linear-gradient(90deg, transparent, #fff);
}
Copy the code

After mask is applied, it looks like this:

In this DEMO, we can briefly understand the basic use of mask.

Here comes the most important conclusion about using masks: the element with the mask attribute will have its content overlapped with the gradient transparent represented by mask, and the overlap will become transparent.

Note that the gradient above was linear-gradient(90deg, transparent, # FFF). The # FFF plain color can be changed to any color without affecting the effect.

CodePen Demo – Basic use of masks

Use mask to realize mask filtering

After understanding the usage of mask, we then use mask to simply realize the example of automatic hidden filtering when the bullet screen meets people in the video bullet screen.

First, I simply simulated a summoner canyon and some basic barrage:

It is convenient to indicate that a static picture is used here, which represents the map of summoner’s canyon. It is not a real video, while the barrage is a line of < P > elements, which is consistent with the actual situation. The pseudocode looks something like this:

<! - map -- -- >
<div class="g-map"></div>
<! -- The container that wraps all the shells -->
<div class="g-barrage-container">
    <! -- All rounds -->
    <div class="g-barrage">6666</div>.<div class="g-barrage">6666</div>
</div>
Copy the code

In order to simulate the actual situation, we add an actual character with a div. If we don’t do any processing, it is actually the feeling when we open the bullet screen when watching the video, and the character is blocked by the video:

Notice that I added a character named Yasuo and used the animation to simulate a simple movement. During the movement, the character was covered by a bullet screen.

Next, you can bring up the mask.

We used the mask to create a radial-gradient to make transparent the vicinity of the figure, and added the same animation to the mask-position of the mask according to the animation of the movement of the figure. The result is something like this:

.g-barrage-container {
    position: absolute;
    mask: radial-gradient(circle at 100px 100px, transparent 60px.#fff 80px.#fff 100%);
    animation: mask 10s infinite alternate;
}

@keyframes mask {
    100% {
        mask-position: 85vw 0; }}Copy the code

In fact, it is necessary to add a mask attribute to the container that places the barrage, mark the position of the character, and change the mask continuously according to the movement of the character. Let’s change mask to background, the principle is obvious.

Replace mask with background sketch:

The transparent part of background, namely the transparent part of the mask, is actually the part of the mask where the barrage will be hidden, while the white part of the barrage will not be hidden, which is the perfect use of the characteristics of the mask.

In fact, this technology has nothing to do with the video itself. We just need to calculate the location of the bullet screen to be shielded according to the video and get the corresponding mask parameters. If you remove the background and moving figures and keep only the barrage and mask, it looks like this:

It should be made clear that the use of mask is not to cover the part of the barrage, but to specify which parts under the barrage container are normally displayed and which parts are transparent and hidden.

Finally, for the full Demo you can poke here:

CodePen Demo — mask realize bullet screen character mask filtering

Application in actual production environment

Of course, above we simply restore the effect of using mask to realize the filter of barrage mask. However, the actual situation is much more complicated than the above scenario, because the position of the hero is uncertain and changes from moment to moment. Therefore, in the actual production environment, the parameters of the mask image are actually calculated by the back-end real-time video processing, and then transmitted to the front-end, which then renders.

For live-streaming websites that use this technology, we can review the elements and see that the mask attribute of the container that wraps the bullet screen changes from moment to moment:

What comes back is an SVG image that looks something like this:

In this way, according to the real-time position changes of people in the video, new masks are constantly calculated and then applied to the barrage container in real time to realize mask filtering.

The last

This article introduces the CSS mask in a real production environment, a very meaningful practice, also shows that many new CSS technologies, properly used, or can bring very beneficial help to the business.

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.