共计 2517 个字符，预计需要花费 7 分钟才能阅读完成。
常常看一些 LOL 较量直播的小伙伴，必定都晓得，在一些弹幕网站（Bilibili、虎牙）中，当人物与弹幕呈现在一起的时候，弹幕会“ 奇妙 ”的躲到人物的上面，看着十分的智能。
简略的一个截图例子：
其实，这里是使用了 CSS 中的 MASK 属性实现的。
mask 简略用法介绍
之前在多篇文章都提到了 mask，比拟具体的一篇是 — 微妙的 CSS MASK，本文不对 mask 的基本概念做过多解说，向下浏览时，如果对一些 mask 的用法感到纳闷，能够再去看看。
这里只简略介绍下 mask 的根本用法：
最根本，应用 mask 的形式是借助图片，相似这样：
{
/* Image values */
mask: url(mask.png); /* 应用位图来做遮罩 */
mask: url(masks.svg#star); /* 应用 SVG 图形中的形态来做遮罩 */
}当然，应用图片的形式后文会再讲。借助图片的形式其实比拟繁琐，因为咱们首先还得筹备相应的图片素材，除了图片，mask 还能够承受一个相似 background 的参数，也就是突变。
相似如下应用办法：
{mask: linear-gradient(#000, transparent) /* 应用突变来做遮罩 */
}那该具体怎么应用呢？一个非常简单的例子，上述咱们发明了一个从彩色到通明渐变色，咱们将它使用到理论中，代码相似这样：
上面这样一张图片，叠加上一个从通明到彩色的突变，
{background: url(image.png) ;
mask: linear-gradient(90deg, transparent, #fff);
}
利用了 mask 之后，就会变成这样：
这个 DEMO，能够先简略理解到 mask 的根本用法。
这里失去了应用 mask 最重要论断： 增加了 mask 属性的元素，其内容会与 mask 示意的突变的 transparent 的重叠局部，并且重叠局部将会变得通明。
值得注意的是，下面的突变应用的是 linear-gradient(90deg, transparent, #fff)，这里的 #fff 纯色局部其实换成任意色彩都能够，不影响成果。
CodePen Demo — 应用 MASK 的根本应用
应用 mask 实现人物遮罩过滤
理解了 mask 的用法后，接下来，咱们使用 mask，简略实现视频弹幕中，弹幕碰到人物，主动被暗藏过滤的例子。
首先，我简略的模仿了一个召唤师峡谷，以及一些根本的弹幕：
不便示意，这里应用了一张动态图，示意了召唤师峡谷的地图，并非真的视频，而弹幕则是一条一条的 <p> 元素，和理论状况统一。伪代码大略是这样：
<!-- 地图 -->
<div class="g-map"></div>
<!-- 包裹所有弹幕的容器 -->
<div class="g-barrage-container">
<!-- 所有弹幕 -->
<div class="g-barrage">6666</div>
...
<div class="g-barrage">6666</div>
</div>为了模仿理论状况，咱们再用一个 div 增加一个理论的人物，如果不做任何解决，其实就是咱们看视频关上弹幕的感触，人物被视频所遮挡：
留神，这里我增加了一个人物亚索，并且用 animation 模仿了简略的静止，在静止的过程中，人物是被弹幕给遮挡住的。
接下来，就能够请出 mask 了。
咱们利用 mask 制作一个 radial-gradient，使得人物左近为 transparent，并且依据人物静止的 animation，给 mask 的 mask-position 也增加上雷同的 animation 即可。最终能够失去这样的成果：
.g-barrage-container {
position: absolute;
mask: radial-gradient(circle at 100px 100px, transparent 60px, #fff 80px, #fff 100%);
animation: mask 10s infinite alternate;
}
@keyframes mask {
100% {mask-position: 85vw 0;}
}
实际上就是给搁置弹幕的容器，增加一个 mask 属性，把人物所在的地位标识进去，并且依据人物的静止一直的去变换这个 mask 即可。咱们把 mask 换成 background，原理一看就懂。
- 把 mask 替换成 background 示意图：
background 通明的中央，即 mask 中为 transparent 的局部，理论就是弹幕会被暗藏遮罩的局部，而其余红色局部，弹幕不会被暗藏，正是完满的利用了 mask 的个性。
其实这项技术和视频自身是无关的，咱们只须要依据视频计算须要屏蔽掉弹幕的地位，失去相应的 mask 参数即可。如果去掉背景和静止的人物，只保留弹幕和 mask，是这样的：
须要明确的是，应用 mask，不是将弹幕局部给遮挡住，而是利用 mask，指定弹幕容器之下，哪些局部失常展现，哪些局部通明暗藏 。
最初，残缺的 Demo 你能够戳这里：
CodePen Demo — mask 实现弹幕人物遮罩过滤
理论生产环境中的使用
当然，下面咱们简略的还原了利用 mask 实现弹幕遮罩过滤的成果。然而理论状况比上述的场景简单的多，因为人物英雄的地位是不确定的，每一刻都在变动。所以在理论生产环境中，mask 图片的参数，其实是由后端实时对视频进行解决计算出来的，而后传给前端，前端再进行渲染。
对于使用了这项技术的直播网站，咱们能够审查元素，看到包裹弹幕的容器的 mask 属性，每时每刻都在发生变化：
返回回来的其实是一个 SVG 图片，大略长这个样子：
这样，依据视频人物的实时地位变动，一直计算新的 mask，再实时作用于弹幕容器之上，实现遮罩过滤。
最初
本文到此结束，心愿对你有帮忙 :)，本文介绍了 CSS mask 的一个理论生产环境中，十分有意义的一次实际，也表明很多新的 CSS 技术，使用切当，还是能给业务带来十分无益的帮忙的。
想 Get 到最有意思的 CSS 资讯，千万不要错过我的公众号 — iCSS 前端趣闻 ????
更多精彩 CSS 技术文章汇总在我的 Github — iCSS，继续更新，欢送点个 star 订阅珍藏。
如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。
