实现一个B站弹幕不挡人物的效果

最新推荐文章于 2023-03-24 00:02:02 发布

程序猿小泓

最新推荐文章于 2023-03-24 00:02:02 发布

阅读量1.6k

点赞数 2

文章标签： css css3 前端

本文链接：https://blog.csdn.net/qq_37669585/article/details/126829000

版权

如今各种视频网站，例如b站都有人物遮挡效果
在这里插入图片描述
其实是利用了svg图+ css的mask-image属性去实现的。
打开f12可以取得

这种图片，就是由AI识别出来然后生成，一张图片也就一两K，一次加载很多张也不会造成很大的负担。
通过在视频不同时的帧引入不同遮罩图，来实现弹幕遮挡的效果。
于是，开始写代码。将svg的存入本地。
再添加一些弹幕特效。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .video {
      width: 668px;
      height: 376px;
      position: relative;
      background-color: black;
      -webkit-mask-image: url("./svg.svg");
      -webkit-mask-size: 668px 376px;
    }
    .bullet {
      position: absolute;
      font-size: 20px;
      color: white;
      animation: ani 5s linear infinite;
    }
    .showBullet {
      position: absolute;
      font-size: 20px;
      color: red;
      animation: show 5s linear infinite;
    }
    
    @keyframes ani {
      0% {
        transform: translateX(668px);
      }
      100% {
        transform: translateX(-668px);
      }
    }

    @keyframes show {
      0% {
        opacity: 0;
      }
      10% {
        opacity: 1;
      }
      100% {
        opacity: 1;
      }
    }
  </style>
</head>
<body>
<div class="video">
  <div class="bullet" style="left: 100px; top: 120px;">元芳，你怎么看</div>
  <div class="bullet" style="left: 200px; top: 60px;">你难道就是传说中的手工耿</div>
  <div class="bullet" style="left: 500px; top: 60px;">纯手工js弹幕</div>
  <div class="bullet" style="left: 300px; top: 140px;">失踪人口回归</div>
  <div class="bullet" style="left: 400px; top: 100px;">下次一定，梗哥</div>
  <div class="showBullet" style="left: 320px; top: 20px;">完结撒花</div>
  <div class="showBullet" style="left: 340px; top: 50px;">泪目</div>
</div>
</body>
</html>