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

经常在腾讯或者爱奇艺上追剧,我平时是不喜欢看弹幕的,我就想简单的看个剧,因为有些弹幕一旦打开,那就是全屏几乎都是,遮住了里面的人物和情景,最近去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>

效果展示:
B站的弹幕为什么可以不挡住人物_第1张图片
用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>

实现效果:
B站的弹幕为什么可以不挡住人物_第2张图片

你可能感兴趣的:(个人总结,css)