B站的弹幕为什么可以不挡住人物

最新推荐文章于 2024-01-13 13:07:16 发布

白鲸ld

最新推荐文章于 2024-01-13 13:07:16 发布

阅读量366

点赞数 1

分类专栏：个人总结文章标签： css

本文链接：https://blog.csdn.net/qq_53280805/article/details/127595364

版权

个人总结专栏收录该内容

83 篇文章 0 订阅

订阅专栏

经常在腾讯或者爱奇艺上追剧，我平时是不喜欢看弹幕的，我就想简单的看个剧，因为有些弹幕一旦打开，那就是全屏几乎都是，遮住了里面的人物和情景，最近去b站了看了一个，因为那弹幕是只要进去就是默认开开的，我也没第一时间去关，然后发现，那些弹幕竟然可以从人物后面过去，不挡住人物同时也可以看弹幕。然后我就觉得好神奇，今天来搜了一下，发现用了mask-image就可以实现。
mask-image是一个很新的东西，因为新所以支持他的浏览器就比较少，所以要考虑兼容问题，该属性现在仅被webkit以私有属性支持。
mask-image需要一张透明部分的图片，该图片用于遮挡在指定的DOM上，被图片透明部分遮住的部分将不被显示，被不透明部分遮住的部分将显示。
实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>B站弹幕类似效果</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .all{
            width: 668px;
            height: 376px;
            background-color: #ee827c;
        }
        .video {
            width: 668px;
            height: 376px;
            position: relative;
            -webkit-mask-image: url("../img/output.png");
            -webkit-mask-size: 668px 376px;
            background-color: #e6b422;
        }
        .character {
            position: absolute;
            font-size: 20px;
            color: black;
        }

    </style>
</head>
<body>
    <div class="all">
        <div class="video">
            <div class="character" style="left: 500px; top: 229px;">完结撒花</div>
            <div class="character" style="left: 200px; top: 20px;">莫名觉得长得像赵本山</div>
            <div class="character" style="left: 300px; top: 40px;">这忽长忽短的头发</div>
            <div class="character" style="left: 400px; top: 60px;">只有会员才能看吧</div>
        </div>
    </div> 
</body>
</html>

效果展示：
在这里插入图片描述
用mask-image实现的一个进度效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>进度</title>
    <style>
        .mask-layer {
            width: 300px;
            height: 200px;
            background: gray;
            -webkit-mask-image: url('../img/output.png');
            -webkit-mask-size: 300px 200px;
        }

        .box {
            width: 100%;
            height: 100%;
            background: linear-gradient(#f1c40f,#e67e22,#e74c3c);
            animation: move 10s;
        }

        @keyframes move {
            from{
                transform: translateY(100%);
            }
            to{
                transform: translateY(0);
            }
        }

    </style>
</head>
<body>
    <div class="mask-layer">
        <div class="box"></div>
    </div>    
</body>
</html>