css 视频弹幕穿透真人滚动
2021-03-29 本文已影响0人
太_2_真_人
先放一张效果图：
GIF 11-40-08.gif
mask:
允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见
首先了解下css mask，mask可以接收一个图片类型或者一个类似background属性的渐变，也就是radial-gradient，其使用方法也类似background属性。详见：(https://developer.mozilla.org/zh-CN/docs/Web/CSS/mask)。
我们可以通过设置一个中间透明镂空的背景图，实现穿透：
以下图片设置成背景图代表视频中的人或动物：
人物图
以下图片更像上面设置成背景图的图片的反向选择，并且跟div.wrapper同样大小（只是为了让透明部分跟上图重合,方便本地测试而已）：
mask图
<style>
#mask {
position: relative;
width: 1000px;
height: 500px;
background: url(https://img.haomeiwen.com/i13472962/c32b07588d5b915c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) no-repeat center;
}
.wrapper {
position: absolute;
left: 0;
top: 0;
width: 1000px;
height: 500px;
overflow: hidden;
mask: url(https://img.haomeiwen.com/i13472962/9fb48139b4a30897.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) no-repeat 0 0 / 1000px 500px;
-webkit-mask: url(https://img.haomeiwen.com/i13472962/9fb48139b4a30897.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) no-repeat 0 0 / 1000px 500px;
}
p {
width: 150px;
height: 15px;
margin-left: calc(100% + 150px);
}
.li1 {
animation: move 8s 4s infinite linear;
}
.li2 {
animation: move 8s 7s infinite linear;
}
.li3 {
animation: move 8s 1s infinite linear;
}
.li4 {
animation: move 8s 3s infinite linear;
}
.li5 {
animation: move 8s 0s infinite linear;
}
.li6 {
animation: move 8s 6s infinite linear;
}
.li7 {
animation: move 8s 1s infinite linear;
}
.li8 {
animation: move 8s 9s infinite linear;
}
.li9 {
animation: move 8s 2s infinite linear;
}
.li5 {
animation: move 8s 0s infinite linear;
}
.li6 {
animation: move 8s 6s infinite linear;
}
.li7 {
animation: move 8s 1s infinite linear;
}
.li8 {
animation: move 8s 9s infinite linear;
}
.li9 {
animation: move 8s 2s infinite linear;
}
@keyframes move {
from {
margin-left: calc(100% + 150px);
}
to {
margin-left: -150px;
}
}
</style>
<body>
<div id="mask"></div>
<div class="wrapper">
<p class="li1">li66666666666666</p>
<p class="li2">li66666666666666</p>
<p class="li3">li66666666666666</p>
<p class="li4">li66666666666666</p>
<p class="li5">li66666666666666</p>
<p class="li6">li66666666666666</p>
<p class="li7">li66666666666666</p>
<p class="li8">li66666666666666</p>
<p class="li9">li66666666666666</p>
<p class="li5">li66666666666666</p>
<p class="li6">li66666666666666</p>
<p class="li7">li66666666666666</p>
<p class="li8">li66666666666666</p>
<p class="li9">li66666666666666</p>
</div>
</body>
这里只是简单的一个模拟，真实场景中，肯定不会这么简单，透明镂空部分都是后端通过算法对视频的操作得出的，然后前端通过websocket接收一张一张的mask遮罩图。
ws图
