css 视频弹幕穿透真人滚动

作者: 太_2_真_人 | 来源:发表于2021-03-29 19:17 被阅读0次

css 视频弹幕穿透真人滚动
B站Lv升级
字幕字体滚动插件——scroxt.js
使用transition实现弹幕滚动效果
css滚动
css滚动
导航的布局：水平滚动，垂直滚动
滚动弹幕
【体验日记】B站弹幕屏蔽设计一致性问题
CSS设置滚动条样式

先放一张效果图：

GIF 11-40-08.gif

mask:

允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见

首先了解下css mask，mask可以接收一个图片类型或者一个类似background属性的渐变，也就是radial-gradient，其使用方法也类似background属性。详见：(https://developer.mozilla.org/zh-CN/docs/Web/CSS/mask)。

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

人物图

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

mask图

<style>
    #mask {
      position: relative;
      width: 1000px;
      height: 500px;
      background: url(https://img.haomeiwen.com/i13472962/c32b07588d5b915c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) no-repeat center;
    }

    .wrapper {
      position: absolute;
      left: 0;
      top: 0;
      width: 1000px;
      height: 500px;
      overflow: hidden;
      mask: url(https://img.haomeiwen.com/i13472962/9fb48139b4a30897.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) no-repeat 0 0 / 1000px 500px;
      -webkit-mask: url(https://img.haomeiwen.com/i13472962/9fb48139b4a30897.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 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遮罩图。