先放一张效果图：

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遮罩图。