css 视频弹幕穿透真人滚动

先放一张效果图：

mask:

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

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

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

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

  
  

  

    
li66666666666666
    
li66666666666666
    
li66666666666666
    
li66666666666666
    
li66666666666666
    
li66666666666666
    
li66666666666666
    
li66666666666666
    
li66666666666666
    
li66666666666666
    
li66666666666666
    
li66666666666666
    
li66666666666666
    
li66666666666666
  

这里只是简单的一个模拟，真实场景中，肯定不会这么简单，透明镂空部分都是后端通过算法对视频的操作得出的，然后前端通过websocket接收一张一张的mask遮罩图。