This is the first day of my participation in Gwen Challenge

When I was watching Douyin live broadcast today, I suddenly found something interesting, that is, the comment area of Douyin live broadcast. How did the comments change from translucent to display, and then from display to gradually disappear

This effect suddenly caught my attention, after all, I am a dish and love to play CSS newbie, see fun effect want to implement. As a result, I can only search on Baidu and Google everywhere, but I can not find the relevant solution, I do not know whether I search the posture is wrong or no one has written relevant articles, but can only explore their own.

Solution 1: Background-clip

First of all, what do you think of the first step when you see this effect? Gradient! Isn’t it? I think is also, CSS 3 support background gradient, also support from color to transparent gradient, which almost everyone knows, but it is no use ah, we need to make the text followed the background color of the display and, according to the background color of the disappeared, in short, the background color of place to have a word! Is there a CSS property that you have in mind at this point? Background-clip: Clip: clip: clip: clip: clip: clip: clip: clip: clip: clip: clip Where there is color, cut it out or word, and where it is transparent, cut it out or transparent, isn’t it good? To start

How, is not the effect similar, but if you try or think carefully, you will find that this is just empty watch, light shelf can not be used, why? Because it doesn’t roll… Moreover, when the content is mixed with text and text, it does not work, and scheme 1 is a complete failure

Plan 2: Mask

The web kept searching until we finally found what we needed, which was Mask. Here’s how it’s supported by browsers

That the properties of concrete can be used to do, we will not dwell on here, interested friends can go to your search, we only talk about here we need to use the role of the mask attribute allows users through the mask or cutting certain areas of the image to hide an element of part or all of the visible area. This attribute is just like a mask in Ps. It is up to us to decide where to show and not to show the elements underneath the mask, so we can easily achieve the desired effect by using the idea of plan 1 and adding the mask attribute. The following is a simple demonstration of the effect. We can also adjust the parameters of the gradient to achieve different effects.

  <div class="wrap">
    <p>Test test test test test test test test test test test</p>
    <p>Test test test test test test test test test test test</p>
    <p>Test test test test test test test test test test test</p>
    <p>Test test test test test test test test test test test</p>
    <p>Test test test test test test test test test test test</p>
    <p>Test test test test test test test test test test test</p>
    <p>Test test test test test test test test test test test</p>
    <p>Test test test test test test test test test test test</p>
    <p>Test test test test test test test test test test test</p>
    <p>Test test test test test test test test test test test</p>
    <p>Test test test test test test test test test test test</p>
    <p>Test test test test test test test test test test test</p>
    <p>Test test test test test test test test test test test</p>
  </div>
Copy the code
html {
  background: rgb(6.255.255);
}
.wrap {
  height: 300px;
  overflow: auto;
  -webkit-mask: linear-gradient(#fff, transparent);
}
Copy the code