CSS奇思妙想—使用 mask 实现视频弹幕人物遮罩过滤
使用 mask 实现视频弹幕人物遮罩过滤
经常看一些 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 技术,运用得当,还是能给业务带来非常有益的帮助的。
喜欢本文章的不妨点个赞~
关注我~持续为您放送精彩~
需要这些资料的,可以点击这里领取!
CSS奇思妙想—使用 mask 实现视频弹幕人物遮罩过滤相关推荐
- 使用CSS - mask 实现视频弹幕人物遮罩过滤
经常看一些 LOL 比赛直播的小伙伴,肯定都知道,在一些弹幕网站(Bilibili.虎牙)中,当人物与弹幕出现在一起的时候,弹幕会"巧妙"的躲到人物的下面,看着非常的智能. 简单的 ...
- CSS奇思妙想 -- 使用 background 创造各种美妙的背景(下篇)...
CSS奇思妙想 -- 使用 background 创造各种美妙的背景(下篇)... 使用 mask 除去混合模式,与背景相关的,还有一个非常有意思的属性 -- MASK. mask 译为遮罩.在 CS ...
- 英雄联盟《双城之战》视频弹幕爬取并分析输出词云
目前,拳头制作的英雄联盟首部动画作品<双城之战>在腾讯视频独家播出.而事实再次证明,拳头是一家被游戏耽误的动画公司,<双城之战>首映非常成功,豆瓣评分9.2,5星评价占67.5 ...
- JavaScript css3模拟简单的视频弹幕功能
最近相对比较空闲,想写一些东西写着玩.就尝试写了一个demo模拟了最简单的视频弹幕功能~~. 思路: 设置一个<div>和所播放的video的大小一致,把这个div标签蒙在video上面用 ...
- html弹幕效果加入视频,JS实现的视频弹幕效果示例
本文实例讲述了JS实现的视频弹幕效果.分享给大家供大家参考,具体如下: 斗鱼弹幕 html,body{font-size:10px;overflow:hidden;margin:0;padding:0 ...
- python抓取腾讯视频弹幕_Python实战 | 如何抓取腾讯视频弹幕
原标题:Python实战 | 如何抓取腾讯视频弹幕 当代年轻人的快乐是网络给的. 如果有人吐槽周末太无聊,他们一定会反驳: 是追剧不香吗? 是吃鸡不好玩吗? 周末辣么短,怎么会无聊呢? 诚然,追剧和游 ...
- 爬取钉钉在B站卑微道歉视频弹幕,做成词云
爬取钉钉在B站卑微道歉视频弹幕,做成词云|钉~ 听这美妙的声音 先看用户老爷们给出得评价 B弹幕爬取的方法 打开钉钉下跪视频 B站链接 然后进入控制台如图查看,打开控制台刷新下页面. 你就会在控制台看 ...
- 用Python把B站视频弹幕爬下来,绘制词云图看看大家最关心什么!
今天带大家做点好玩的,把B站热门视频弹幕爬下来制作词云图! 康康大家都怎么说! 开始之前先给大家啰嗦几句,可能有些兄弟不会安装模块,我大概讲一下. 如何安装模块: win(键盘左下角ctrl 和 Al ...
- 视频弹幕技术 php,HTML5实现视频弹幕功能
1.首先展示一下弹幕视频弹幕原图,事实说话 2.代码展示 1>html代码展示 关闭弹幕 开启静音 2>css代码展示 *{ padding: 0; margin: 0; } input{ ...
最新文章
- ensp大型网络环境设计与实现_mongodb内核源码设计实现、性能优化、最佳运维系列-网络传输层模块源码实现三...
- html页面转换成pdf
- linux路由信息自动丢失,浅谈用expect实现路由器自动备份数据
- 属性子集选择的基本启发方法_图网络基本属性
- Qt Creator 运行s60 Emulator
- VTK:创建一棵树并标记顶点和边用法实战
- Kenai.com 将与 java.net 合并
- Hybris Commerce Cloud backoffice的一些使用截图 - OAuth工作中心
- 用户管理实用命令(第二版)
- backup exec linux卸载,Symantec Backup Exec 2012 Agent for Linux 卸载
- 通俗易懂理解几何光学(三)平面与平面系统
- 来自Unix/Linux的编程启示录
- 数学建模算法之动态规划
- python 三角形雷达图,python 画雷达图
- U盘快捷方式病毒查杀
- iphone 越狱需要安装的包
- 清华校友、香港科技大学准博士ICCV顶会论文被爆公然抄袭!去年CVPR也是抄的...
- flash 交互操作:裁剪位图
- html 标签 简写_HTML缩写标签
- 高德citycode和国家citycode编码转换
热门文章
- (已解决)STM32报错Error: L6218E: Undefined symbol assert_param (referred from misc.o).
- 苹果吃鸡蓝牙耳机推荐哪个?性价比高的游戏蓝牙耳机推荐
- 怎么修改和编辑PDF文件中的文字内容
- WebSocket 原理 1
- python 合并文件夹内所有Excel文件 xslx
- 生成帮助文档(html或chm格式)
- Zookeeper之基础知识
- 求一个整数的百位数,十位数,个位数
- XJOI_3571_求十位数
- Chrome插件有哪些?