CSS mask 遮盖应用

2022-04-21
css

CSS 属性中，为我们提供了一个用于遮盖的属性即mask，通过mask允许开发者通过遮盖或剪切特定的区域或图片的方式来隐藏一个元素或全部可见的区域，在目前mask属性经常被应用在弹幕之中，在 bliblibli平台内所应用。

<style>
    html, body {
        width: 100%;
        height: 100%;
        display: flex;
    }

    .text {
        -webkit-mask: linear-gradient(90deg, transparent, #000);
        mask: linear-gradient(90deg, transparent, #000);
    }
</style>
<h1 class="text">Hello,world!</h1>

在通常的情况下并没有这么简单，上述只是简单的使用MASK来实现文字的消失效果，通常真实环境中，可能还会根据后端来生成遮盖图片，文字移动过去则触发遮盖的效果等。

⬅️ Go back