我们在B站看视频的时候偶然发现当字幕遇到人物的时候就被裁切了,不会挡住人物,是不是觉得特别神奇[奸笑]
高端的效果,往往只需要采用最朴素的实现方式,我们打开电脑的F12,一探究竟。一张图片和一个属性[what]
-webkit-mask-image这属性是干嘛用的[what]
为了印证我们的想法,我们来写一个demo
Title
元芳,你怎么看
你难道就是传说中的奶灵
你好,我是胖灵
这是第一集,还没有舔灵
效果是这样的
加一个红背景,看的清楚一些
至此我们就实现了B站同款的不遮挡人物的弹幕。至于这张图片是怎么来的,肯定是AI识别出来然后生成的,一张图片也就一两K,一次加载很多张也不会造成很大的负担。
最后来看看这个神奇的css属性吧
https://developer.mozilla.org/zh-CN/docs/Web/CSS/mask-image
Experimental: 这是一个实验中的功能
所以在开发需求的时候可以把它当成一个亮点使用,但是不能强依赖于这个属性做需求。
它还有一系列的属性,有兴趣的话可以挨个试一下。
页面更新:2024-04-06
本站资料均由网友自行发布提供,仅用于学习交流。如有版权问题,请与我联系,QQ:4156828
© CopyRight 2008-2024 All Rights Reserved. Powered By bs178.com 闽ICP备11008920号-3
闽公网安备35020302034844号