这个js效果怎麽做到的呢?通常怎麽称呼?

Question

在visual studio code的官方首页看到这个效果

看了一下它的页面代码，是用一个div.mask先做了上下模煳的效果，裡面在放<ul>和数个<li>做为每个文字的项目，但是它在ul那有写个 reactroot ，我试着将chrome的javascript功能关起来后那效果确实不能跑了。

.home .getting-started .mask {

    background: linear-gradient(180deg,#fff,hsla(0,0%,100%,0),hsla(0,0%,100%,0),#fff);

    z-index: 5;

    height: 100%;

    width: 100%;

    position: absolute;

    left: -20px;

}

也就是说这应该不是纯CSS的效果，而是利用js操作dom得出的效果，但具体怎麽实现我没办法从reac转es5的javascript代码段看出来，想请问大家这效果具体怎麽实现呢? 用纯 javascript或jquery都行，或者是设计思路。

谢谢各位