b站智能防挡原理-css3 mask-image记录

首先利用一个蒙版

bb.png

根据特性,黑色为会显示部分,透明为不显示的

.mask{
        width:475px;
        height:260px;
        background-image:url("./11a.jpg");
        background-size: cover;
        -webkit-mask-image:url("./bb.png");
    }

效果如下

微信图片_20181113143617.png

 @keyframes mask{
        0% {-webkit-mask-position:0px 0px;}
        25% {-webkit-mask-position:619px 0px;}
        50% {-webkit-mask-position:0px 0px;}
        75% {-webkit-mask-position:308px 0px;-webkit-mask-size:100%;}
        100% {-webkit-mask-size:1000%;}
     }

    .mask{
        width:700px;
        height:392px;
        background:black url("http://www.kkkk1000.com/images/1534750163.jpg");
        -webkit-mask-image:url("http://www.kkkk1000.com/images/1534750222.jpg");
        animation:mask 5s linear infinite forwards;
    }

<div class="mask"> </div>

447993950-59fbbff73e8e9_articlex.gif

弹幕实现的效果差不多就是

<img src="./test.jpg" class="massi" alt="">
  <div class="mass">
    <div class="danmu">范加尔咖啡机可金风科技尔康范加尔开发复健科副科级副科级科技风科技嗯咖啡咖啡</div>
  </div>

img来代表正在播放的视频,mass是蒙版背景,danmu就是滚动的弹幕

.massi{
        width:700px;
        height:392px;
        position: absolute;
        bottom: 0;
}
@keyframes gogo{
        0% {left:100%;}
        100% {left:0}
     }
.danmu{
        width: 700px;
        height: 20px;
        position: absolute;
        bottom: 350px;
        color: #aaf104;
        animation:gogo 5s linear ;
}

最后就会实现一个在滚动的字幕

微信图片_20181113144920.png