关于css:css-视频弹幕穿透真人滚动

35次阅读

共计 1949 个字符，预计需要花费 5 分钟才能阅读完成。

先放一张效果图：

mask:

容许使用者通过遮罩或者裁切特定区域的图片的形式来暗藏一个元素的局部或者全副可见

首先理解下 css mask，mask能够接管一个图片类型或者一个相似 background 属性的突变，也就是 radial-gradient，其应用办法也相似background 属性。详见：(https://developer.mozilla.org…。

咱们能够通过设置一个两头通明镂空的背景图，实现穿透：
以下图片设置成背景图代表视频中的人或动物：

以下图片更像下面设置成背景图的图片的反向抉择，并且跟 div.wrapper 同样大小（只是为了让通明局部跟上图重合, 不便本地测试而已）：

<style>
    #mask {
      position: relative;
      width: 1000px;
      height: 500px;
      background: url(https://segmentfault.com/img/bVcQTsO) no-repeat center;
    }

    .wrapper {
      position: absolute;
      left: 0;
      top: 0;
      width: 1000px;
      height: 500px;
      overflow: hidden;
      mask: url(https://segmentfault.com/img/bVcQTsQ) no-repeat 0 0 / 1000px 500px;
      -webkit-mask: url(https://segmentfault.com/img/bVcQTsQ) no-repeat 0 0 / 1000px 500px;
    }

    p {
      width: 150px;
      height: 15px;
      margin-left: calc(100% + 150px);
    }

    .li1 {animation: move 8s 4s infinite linear;}

    .li2 {animation: move 8s 7s infinite linear;}

    .li3 {animation: move 8s 1s infinite linear;}

    .li4 {animation: move 8s 3s infinite linear;}

    .li5 {animation: move 8s 0s infinite linear;}

    .li6 {animation: move 8s 6s infinite linear;}

    .li7 {animation: move 8s 1s infinite linear;}

    .li8 {animation: move 8s 9s infinite linear;}

    .li9 {animation: move 8s 2s infinite linear;}

    .li5 {animation: move 8s 0s infinite linear;}

    .li6 {animation: move 8s 6s infinite linear;}

    .li7 {animation: move 8s 1s infinite linear;}

    .li8 {animation: move 8s 9s infinite linear;}

    .li9 {animation: move 8s 2s infinite linear;}

    @keyframes move {
      from {margin-left: calc(100% + 150px);
      }

      to {margin-left: -150px;}
    }
  </style>
  <body>
  <div id="mask"></div>
  <div class="wrapper">
    <p class="li1">li66666666666666</p>
    <p class="li2">li66666666666666</p>
    <p class="li3">li66666666666666</p>
    <p class="li4">li66666666666666</p>
    <p class="li5">li66666666666666</p>
    <p class="li6">li66666666666666</p>
    <p class="li7">li66666666666666</p>
    <p class="li8">li66666666666666</p>
    <p class="li9">li66666666666666</p>
    <p class="li5">li66666666666666</p>
    <p class="li6">li66666666666666</p>
    <p class="li7">li66666666666666</p>
    <p class="li8">li66666666666666</p>
    <p class="li9">li66666666666666</p>
  </div>
</body>

这里只是简略的一个模仿，实在场景中，必定不会这么简略，通明镂空局部都是后端通过算法对视频的操作得出的，而后前端通过 websocket 接管一张一张的 mask 遮罩图。

正文完