为什么 B 站的弹幕可以不挡人物?
公众号程序猿DD
共 1932字,需浏览 4分钟
· 2022-11-04
![8830b86b6d87842ae134c0d46062403d.webp](https://filescdn.proginn.com/3717e140bcc14c56d026dc80633111d2/8830b86b6d87842ae134c0d46062403d.webp)
高端的效果,往往只需要采用最朴素的实现方式,忙碌了两个小时,陈师傅打开了F12,豁然开朗。一张图片+一个属性,直接搞定。
![7f0d056ac27d00925b49f5f6b5f41b79.webp](https://filescdn.proginn.com/837540b03ec271d0c8204ded4e23d335/7f0d056ac27d00925b49f5f6b5f41b79.webp)
![b2a1907c4b57e4663e952051ca7f2621.webp](https://filescdn.proginn.com/5ebe3158a3b32ecc03d58463d0b9ebea/b2a1907c4b57e4663e952051ca7f2621.webp)
<!DOCTYPE html>效果是这样的
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.video {
width: 668px;
height: 376px;
position: relative;
-webkit-mask-image: url("mask.svg");
-webkit-mask-size: 668px 376px;
}
.bullet {
position: absolute;
font-size: 20px;
}
</style>
</head>
<body>
<div class="video">
<div class="bullet" style="left: 100px; top: 0;">元芳,你怎么看</div>
<div class="bullet" style="left: 200px; top: 20px;">你难道就是传说中的奶灵</div>
<div class="bullet" style="left: 300px; top: 40px;">你好,我是胖灵</div>
<div class="bullet" style="left: 400px; top: 60px;">这是第一集,还没有舔灵</div>
</div>
</body>
</html>
复制代码
![620dff912c87d2c2a38df1e591da0cfa.webp](https://filescdn.proginn.com/d56a5689ab1807b570cd8a526cab89c5/620dff912c87d2c2a38df1e591da0cfa.webp)
![d1c167c1692cea7d11893e7cf0e88865.webp](https://filescdn.proginn.com/20b7b229ff5206cd972aa1455d084f91/d1c167c1692cea7d11893e7cf0e88865.webp)
![d33e6d17da394eab909f5ca4fbf997a8.webp](https://filescdn.proginn.com/b6bb2f610da5de445fefdb775936a4e0/d33e6d17da394eab909f5ca4fbf997a8.webp)
推荐阅读
··································你好,我是程序猿DD,10年开发老司机、阿里云MVP、腾讯云TVP、出过书创过业、国企4年互联网6年 。 从普通开发到架构师、再到合伙人。一路过来,给我最深的感受就是一定要不断学习并关注前沿。只要你能坚持下来,多思考、少抱怨、勤动手,就很容易实现弯道超车! 所以,不要问我现在干什么是否来得及。如果你看好一个事情,一定是坚持了才能看到希望,而不是看到希望才去坚持。相信我,只要坚持下来,你一定比现在更好! 如果你还没什么方向,可以先关注我, 这里会经常分享一些前沿资讯,帮你积累弯道超车的资本。
点击领取2022最新10000T学习资料评论