在 B 站看视频的时候发现当字幕遇到人物的时候就被裁切了，不会挡住人物，觉得很神奇。

实现方式（一张图片+一个属性，搞定）

一行css代码：

mask-image: url(img/head.png);

为了更好的兼容性，你可以补一个带 -webkit- 前缀的样式：

-webkit-mask-image: url(img/head.png);
-moz-mask-image: url(img/head.png);
-ms-mask-image: url(img/head.png);
-o-mask-image: url(img/head.png);

一张图片：

具体demo实现：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>mask</title></head><style type="text/css">.mask {width: 240px;height: 240px;color: #fff;background-color: red;/* background-image: url(img/head.png); */-webkit-mask-image: url(img/head.png);-webkit-mask-size: 100% 100%;position: relative;margin: auto;}p {white-space: nowrap;color: black;}.text {position: absolute;left: 240px;animation: sport 15s linear infinite;}/* 鼠标经过停止运动 */.text:hover {animation-play-state: paused;}@keyframes sport {0% {}100% {/* 父盒子宽度减去100% */transform: translateX(-1000px);}}</style><body><div class="mask"><p>高端的效果，往往只需要采用最朴素的实现方式。一张图片+一个属性，直接搞定</p><p>高端的效果，往往只需要采用最朴素的实现方式。一张图片+一个属性，直接搞定</p><p class="text">高端的效果，往往只需要采用最朴素的实现方式。一张图片+一个属性，直接搞定</p></div></body>
</html>

实现效果图

至此我们就实现了不遮挡人物的弹幕。至于这张图片是怎么来的，肯定是 AI 识别出来然后生成的。

点击查看这个神奇的 css 属性吧

弹幕不遮挡人物效果实现相关推荐

效果：mask-image 哔哩哔哩弹幕不遮挡人物
一.展示二.解析哔哩哔哩观看视频,能看到弹幕不会遮挡人物,用户体验非常好. 原理:mask-image引入svg图片 -webkit-mask-image: url(""). ...
为什么B站中的弹幕可以不遮挡人物
上班逛B站时摸鱼时,看到了满屏的弹幕,而且还不挡脸,突然心血来潮来看看它是怎么实现的? 不难发现弹幕其实它就是有一个蒙版层div,遮挡在视频组件的上方,z-index层级设置的比较高(这里是11),v ...
实现一个B站弹幕不挡人物的效果
如今各种视频网站,例如b站都有人物遮挡效果其实是利用了svg图+ css的mask-image属性去实现的. 打开f12可以取得这种图片,就是由AI识别出来然后生成,一张图片也就一两K,一次加载很 ...
B站视频弹幕不挡住人脸效果
前言有天在B站看二舅的视频时,密密麻麻的弹幕居然没有二舅的人脸,很好奇是怎么做到的,于是决定一探究竟. 高端的效果,往往只需要采用最朴素的实现方式,琢磨了好一会儿,打开了F12,豁然开朗.一张图片+ ...
七天免登录（Cookie+session）+ 页面显示动画人物效果（萌娘+气泡效果）+购物车的实现代码
一.七天免登录(Cookie+session),基于实现jsp页面页面效果:勾选7天免登录复选框,输入用户名和密码,点击登录即可,登录后可在cookie中查看用户登录信息,以及用户过期时间 1.登录 ...
PS动作一键制作油漆飞溅素描人物效果
动作支持CS3以上版本PS软件,动作我们可以到陌鱼社区下载"一键用PS做出油漆飞溅人物效果动作插件",然后用这个动作即可制作出下面图片效果啦! 01.打开软件,载入图案.画笔.动作 ...
暗调时尚科幻杂志科技封面人物效果
首先这是用陌鱼社区制作虚幻科技虚拟电影人物效果PS动作做成的效果,没有这个动作可以自己动手搜一下,下面是这个动作制作出来的一些效果,然后我们继续下面的演示教程,动作支持Adobe Photoshop ...
unity实现吃鸡摄像头，自动拉近拉远视距，不被遮挡物遮盖人物效果
实现类似摄像头,遇到遮挡物自动拉近拉远视距,不被遮挡物遮盖人物的效果效果图一.简介二.基本层级三.核心脚本四.寒暄效果图传入的时gif图,帧率有所降低,不过能看清楚这是旋转时的效果这 ...
页游《火影忍者》角色和背景遮挡半透明效果的实现
这里讲的是关于2D游戏的角色和背景以及物体之间的遮挡关系,用半透明角色处理的讨论和实现方式.这里主要是讨论关于页游<火影忍者>里对于角色和背景物体之间的遮挡处理方式.同时也实现了和他一样的 ...

弹幕不遮挡人物效果实现

实现方式（一张图片+一个属性，搞定）

弹幕不遮挡人物效果实现相关推荐

最新文章

热门文章