汨罗网站建设,盐城网站开发基本流程,网站建设分金手指专业六,页面设计站在学员的角度上班逛B站时摸鱼时#xff0c;看到了满屏的弹幕#xff0c;而且还不挡脸#xff0c;突然心血来潮来看看它是怎么实现的#xff1f; 不难发现弹幕其实它就是有一个蒙版层div#xff0c;遮挡在视频组件的上方#xff0c;z-index层级设置的比较高#xff08;这里是11…上班逛B站时摸鱼时看到了满屏的弹幕而且还不挡脸突然心血来潮来看看它是怎么实现的 不难发现弹幕其实它就是有一个蒙版层div遮挡在视频组件的上方z-index层级设置的比较高这里是11video标签层级为默认值0所以这个视频播放的页面是由多个层组成的当然该页面还有很多其他的layout层这里不细讲这一点我们也可以从页面layout分层中也可以直观地看出来 此时又有同学跳出来问。。。。。。 同学A: ”那它这个不挡脸的弹幕又是如何实现的呢“
me这位同学这个问题很好我们接着看
me高端的食材往往需要最崴的厨子 不对… 高端的效果往往底层原理很简单 废话不多说我模拟了一个Demo直接上代码。。。
// index.html文件
headmeta charsetutf-8 /link relicon href%PUBLIC_URL%/favicon.ico /meta nameviewport contentwidthdevice-width, initial-scale1 /meta nametheme-color content#000000 /metanamedescriptioncontentWeb site created using create-react-app/titleReact App/titlestyle.back{position: relative;width: 751px;height: 420px;-webkit-mask-image: url(data:image/svgxml;base64,PHN2ZyB2ZXJzaW9uPSIxLjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKIHdpZHRoPSI3NTAuMjIyMjIyMjIyMjIyMnB4IiBzdHlsZT0idHJhbnNmb3JtOnNjYWxlKDEuMDAxLDEpOyIgaGVpZ2h0PSI0MjJweCIgdmlld0JveD0iMCAwIDMyMC4wMDAwMDAgMTgwLjAwMDAwMCIKIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIG1lZXQiPgo8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjAwMDAwMCwxODAuMDAwMDAwKSBzY2FsZSgwLjEwMDAwMCwtMC4xMDAwMDApIgpmaWxsPSIjMDAwMDAwIiBzdHJva2U9Im5vbmUiPgo8cGF0aCBkPSJNMCA5MDUgbDAgLTg5NSAyMzggMCAyMzggMCAyIDYzIGM1IDEzNiA0NiAzNTcgNzggNDE3IDIyIDQzIDU2IDc1IDE0NCAxMzUgOTYKNjUgMTI1IDg3IDE3OCAxMzEgMjAgMTcgNjUgNTAgOTggNzMgbDYxIDQxIDcgNzIgYzMgNDAgOSA5MSAxMiAxMTQgNSAzNyAxIDQ4Ci00MCAxMDggLTI1IDM3IC00NiA3NCAtNDYgODIgMCA4IC0xMSAxOSAtMjQgMjMgLTI4IDExIC0zNiAyOSAtMzYgODAgMCAyMCAtNgo0NSAtMTMgNTYgLTcgMTEgLTIwIDQ2IC0yNyA3OCAtMjQgMTA0IDIwIDIwMSAxMTMgMjQ4IDI4IDE1IDM3IDI2IDM3IDQ0IGwwCjI1IC01MTAgMCAtNTEwIDAgMCAtODk1eiIvPgo8cGF0aCBkPSJNMTU5MCAxNzc5IGMwIC0xMiA3IC0yNyAxNyAtMzQgOSAtNyAxOSAtMzQgMjMgLTYxIDQgLTI3IDE0IC02MyAyMSAtODEgMTAKLTI0IDEwIC00MCAyIC03MCAtMTkgLTY2IC00MyAtMTg3IC00MyAtMjE4IC0xIC0yNyAtNDcgLTIwNiAtNjQgLTI0NiAtNiAtMTMKOSAtMjMgNzMgLTQ5IDEwMSAtNDAgMTA4IC00OCA5MSAtMTAxIC0xNiAtNDYgLTEyIC01MiA1MSAtNjkgMzcgLTEwIDEyMyAtNTMKMTQ4IC03MyAyNiAtMjEgODYgLTExMSAxMTkgLTE3NSAyNiAtNTIgMzIgLTc2IDMyIC0xMjcgMCAtNTkgMyAtNjYgNDEgLTExMQoyMiAtMjcgNDcgLTYyIDU2IC03OSA5IC0xNiAzNSAtNTkgNTggLTk1IDQ5IC03NiA4MyAtMTUwIDc3IC0xNjggLTMgLTkgOTIKLTEyIDQ1MiAtMTIgbDQ1NiAwIDAgODk1IDAgODk1IC04MDUgMCAtODA1IDAgMCAtMjF6Ii8CjwvZz4KPC9zdmcCg);-webkit-mask-size: 751px 420px;background-color: brown;}.bullet{position: absolute;font-size: 20px;color: #FFFFFF;}/style/headbodydiv idroot23456789/div/body
/html// App.js文件
import Img from ./components/video;function App() {return Img /;
}export default App;// Img组件
const texts[{left:140,top:10,text:UP主好帅},{left:200,top:430,text:你难道就是传说中的奶灵},{left:231,top:70,text:你好我是ronychen},{left:20,top:35,text:喜欢唱跳rap篮球},{left:821,top:53,text:HELLO WORLD},{left:30,top:121,text:我是练习时长2年半的练习生},{left:398,top:321,text:哈哈哈哈},{left:190,top:90,text:我就蹭蹭不进去},{left:170,top:200,text:hahahahahahahahah},{left:240,top:490,text:这是什么XXXX},{left:420,top:340,text:元芳你则么看},
]
const Img (){return (div classNameback{texts.map((item,index)(div key{index} classNamebullet style{{left:${item.left}px, top:${item.top}px}}{item.text}/div))}/div)
}export default Img;基本看到这大部分同学应该都能理解了其实原理很简单一张蒙版图 一个属性-webkit-mask-image就搞定了实际效果就是这样 是不是有种那感觉了 总结 弹幕原理就如我上面所说有一个单独的蒙版层div它会设置一个比视频组件更高的层级值这样就能显示在视频上方这里插一句话在移动端大多数浏览器貌似都不支持在video标签上放其他内容在移动端video标签貌似已经脱离标准文档流即使你设置再高的z-index值也是不行的回归主题至于弹幕不遮挡人物这种效果的实现我的理解应该是AI算法会实时导出视频中识别到的人物然后导出这些人物的图片这点我们可以在network中看到会有实时的图片加载这些图片就是我们上面要用到的蒙版图然后再结合css中的-webkit-mask-image属性就可以实现上述效果该属性具体的用法可以点击这里查看 至于这一张张的蒙版图片是怎么来的这块我也不是很清楚应该是AI算法实时导出的吧 有兴趣的同学自行了解吧 hahaha。。。
