经常看一些 LOL 比赛直播的小伙伴，肯定都知道，在一些弹幕网站（Bilibili、虎牙）中，当人物与弹幕出现在一同的时分，弹幕会“夸姣”的躲到人物的下面，后端开发看着十分的智能。
简略的一个截图比如车莎莎：
其实，这儿是运用了 CSS 中的 MASK 特征结束的github。
mask 简略用法介绍
之前在多篇文章都提到了 mas后端破解体系k，比较具体的一篇是 — 夸姣的 CSS MASK，本文不对 mask 的根柢概念做过多阐明，向下阅览时，假定对一些 mask 的用法感到疑问，能够再去看看。
这儿github是干什么的只陈涉世家翻译及原文简略介绍下 mask 的根柢用法：giticomfort
最根柢，运用 mask 的方法github永久回家地址mi是仰仗图GitHub片，类似这样：
{
/* Image values */
mask: url(mask.pgithub中文官网ng); /* 运前端和后端的差异用位gitv图来做遮罩 */
m后端组ask: url(masks.svg#star); /* 运用 SVG 图形中的形状来做遮罩 */
}
当然，运用图片的方法后文会再讲。仰仗图片的方法其实陈思思比较繁琐，由于咱们首要还得预备相应的图片素材，除了图片，mask 还能够接受一个类似 backg前端面试题2021round 的参数，也便是突变。
类似如下运长沙市气候用方法github：
{
mask: linear-gradient(#000, transparenCSSt) /* 运用突变来做遮罩 */
}
那该具体前端开发需求掌握什么技能怎样运用呢？一个十分简略的比如，上述咱们发清楚一个从黑色到通明突变色，咱们将它运用到实践中，代码ggitlabiti轮胎是什么品牌类似这样：
下面这样一张图片，叠加上一个从通明到黑色的giti突变，
{
background: ur长生十万年l(GitHubimage.png) ;
mas后端开发k: linear-gradi前端面试题2021ent(90deg, transparent, #fff);
}
应后端破解体系用了 mask 之后，就会变成这样：
这个 DEMO，能够先简略了解到 mask 的根柢用法。
这儿得到了运用 mask 最重要定论：添加了 mask 特征的元素，其内容会与 mgitvask 标明的突变的 tgithub是干什么的ransparent 的堆叠部分，而且堆叠部分将会变得通明。
值得留心的是，上面的突变运用的是 linear-gradient(90deg, transparent, #fff)，这儿的 #fff 纯色部分前端开发其实换成恣意颜色都能够，不影响效果。
Codgithub永久回家地址miePen后端开发 Demo — 运用 MASK 的根柢运用
运用 mask 结束人后端开发物遮罩过滤
了解了 maskGit 的用法后，接下前端和后端的差异来，我gitee们运用 mask，简略结束视频弹幕中，弹幕碰到人物，主动被躲藏过滤的比如。后端组
首要，我简略的模仿了一个召唤前端开发需肄业什么师峡谷，以及一些根柢的弹幕：
便利暗示，这儿运用了一张静态图，标清楚召唤师峡谷的地图，并非真的视频，而弹幕则是一条一条的 <p> 元素，和实践gitlab状况一同。伪代码大约是这样：
<!-- 地图 -->
<div class="g-map"></div>
<!-- 包裹悉数弹幕的容器 -->
<div class="g-长沙师范学院barrage-conta长沙市气候iner">
<!-- 悉数弹幕 -->CSS
<gitidiv class="g后端工程师首要做什么-barrage">6giti666</div>
.github敞开私库..
&giti轮胎是github喵绅士什么品牌lt;div class="g-barrage"&Gitamp;gt辰时是几点到几点;66Git66</di后端破解体系v&g后端收费t;
</后端div>
为了模仿实践状况，CSS咱们再用前端一个 div 添加一个实践的人物，假定不做任何处理，其实便是咱们看视频翻开弹幕的感触，人前端训练组织物被视频所github敞开私库遮挡：
留心github官网，这儿我添加了一个前CSS端结构人物亚索，而且用 anima前端tigithub下载on 模仿了简略的运动，giticomfort在运动的过程中，人物是被弹幕给遮挡住的。长沙师范学院
接下来，就能够请出 mask 了。
咱们运用 mask 制作后端开发薪酬一般多少一个 radial-gradient ，使得人物邻近为 transparent，而且根据人物运动的 animation，给 mask 的 mask后端言语-pos仓鼠养殖八大禁忌ition 也添加上相同的giti animation 即可。终究能够github永久回家地址mi得到github下载这样的效果：
.g-barrage-container {
position: absolute;
mask: radial-gradient(circle at 100px 100px, transparent 60px, #fff 80px, #fffgit指令 100%);
animation: magithubsk 10s车莎莎 infin后端itegithub源码 alternate;
}
@keyframes mask {
100% {
mask-posit超崇高骑士ion: 85vw 0;
}
}
实践上便是给放置弹幕的容器，添加一个 mask 特征，后端破解体系github中文官网把人物地址的方位标识出来前端开发，而且根据人物的运动不断的去转换这giti轮胎是什么品牌个 mask 即可。咱们把 magit指令sk 换成 background，原理一看就懂。
把 mask 替换成 background 暗示图：
backgro后端工程师主要做什么und 通明的当地，即 mask 中为 transpare后端开发薪酬一般多少nt 的部分，实践便是弹幕会被躲藏遮罩的部分，而其他白后端开发色部分，弹幕不会被躲藏，正是完美的运用了 mask 的特性。
其实这项技能和视频本身是无关的，咱们只需求根据视频核算需求屏蔽掉弹幕的方位，得到相应的 mask 参数即可陈思github永久回家地址mi思。假定去掉布景和运动的人物，只保存弹gith陈胜涉家文言文翻译ub官网幕和 mask，是这样的：
需求清楚的是，运用 mask，不是将弹幕部分给遮挡住，而是运用 mask，指定弹幕容前端开发github永久回家地址mi器之下，哪些部分正前端学什么常展现，哪些部github喵绅士分通明躲藏。
终究，完好的 Demo 你能够github源码戳这儿：
CodePen Demo — mask 结束弹幕人物遮罩过滤
实践出产环境中的运用
当Git然，上面CSS咱们简略的恢复了运用 mask 结束弹幕遮罩过滤的效果。但是实践状况比上前端开发需要学什么述的场景杂乱的多，由于人物英雄的方位是不确定的，giticomfort每一刻都在改动。所以在实践出产环github中文官网境中，mask 图片的参数，其实是由后端实时对视频进行处理核算出来的，然后传给前端，前端再进行烘托。
关于运用了这项技能的直播网站，咱们能够查看元github敞开私库素，看到包裹github怎么读弹幕的容器的 mask 特征，每时每刻都在产生改动：
回来回来的其实是一个 SVG 图片，大约长这个姿势：github怎样读
这样，根据视频人物的实时前端开发方位改后端开发需求掌后端组握什么技能动，不断核算新的 mask，再实时效果于弹幕容器之上，结束遮后端组罩过滤。
终究
本文到超神兽宠店此结束，期望对你有协助 :)，本文介绍了 CSS mask 的一个实践出产环境中后端工程师首陈胜涉家文言文翻译要做什么，十分有意义的一次实践，也标明许多新的 CSS 技能，运用保险，仍是能给事务带来十分有利的协助的。
想 Get 到最后端开发有意思的后端开发 CSS 资讯，千前端开发需要学什么万不要失去我的大众号 — iCSSgiti轮胎是什么品牌前端趣闻后端
更多精彩 CSS 技能文章汇总在我的 Github –前端面试题– i后端收费CSS ，持续更新，欢gitlab迎点个 star 订阅保藏。
假定还有什么疑问或仓鼠养殖八大忌讳许主张，能够多多交流，原创文章，文笔有限，管中窥豹，文中若有不正之处，万望github官网奉告。
