那天在B站看視頻的時候偶然發(fā)現(xiàn)當(dāng)字幕遇到人物的時候就被裁切了,不會擋住人物,覺得很神奇,于是決定一探究竟。
高端的效果,往往只需要采用最樸素的實現(xiàn)方式,忙碌了兩個小時,陳師傅打開了F12,豁然開朗。一張圖片+一個屬性,直接搞定。
為了印證我的想法,我決定自己寫一個demo
Title 元芳,你怎么看你難道就是傳說中的奶靈你好,我是胖靈這是第一集,還沒有舔靈
效果是這樣的
加一個紅背景,看的清楚一些
至此我們就實現(xiàn)了B站同款的不遮擋人物的彈幕。至于這張圖片是怎么來的,肯定是AI識別出來然后生成的,一張圖片也就一兩K,一次加載很多張也不會造成很大的負(fù)擔(dān)。
最后來看看這個神奇的css屬性吧
developer.mozilla.org/zh-CN/docs/…
Experimental: 這是一個實驗中的功能
所以在開發(fā)需求的時候可以把它當(dāng)成一個亮點使用,但是不能強(qiáng)依賴于這個屬性做需求。
它還有一系列的屬性,有興趣的話可以挨個試一下。
原作者:稀土掘金錢得樂 在此特別鳴謝!
-
AI
+關(guān)注
關(guān)注
87文章
31155瀏覽量
269494 -
CSS
+關(guān)注
關(guān)注
0文章
109瀏覽量
14391
原文標(biāo)題:為什么 B 站的彈幕可以不擋人物?
文章出處:【微信號:芋道源碼,微信公眾號:芋道源碼】歡迎添加關(guān)注!文章轉(zhuǎn)載請注明出處。
發(fā)布評論請先 登錄
相關(guān)推薦
評論