JavaScript?CSS解析B站的彈幕可以不擋人物原理及技巧
正文
那天在B站看視頻的時(shí)候偶然發(fā)現(xiàn)當(dāng)字幕遇到人物的時(shí)候就被裁切了，不會(huì)擋住人物，覺得很神奇，于是決定一探究竟。
高端的效果，往往只需要采用最樸素的實(shí)現(xiàn)方式，忙碌了兩個(gè)小時(shí)，陳師傅打開了F12，豁然開朗。一張圖片+一個(gè)屬性，直接搞定。
demo
為了印證我的想法，我決定自己寫一個(gè)demo
<!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>效果是這樣的
加一個(gè)紅背景，看的清楚一些
至此我們就實(shí)現(xiàn)了B站同款的不遮擋人物的彈幕。至于這張圖片是怎么來的，肯定是AI識(shí)別出來然后生成的，一張圖片也就一兩K，一次加載很多張也不會(huì)造成很大的負(fù)擔(dān)。
最后來看看這個(gè)神奇的css屬性吧
developer.mozilla.org/zh-CN/docs/…
Experimental: 這是一個(gè)實(shí)驗(yàn)中的功能
所以在開發(fā)需求的時(shí)候可以把它當(dāng)成一個(gè)亮點(diǎn)使用，但是不能強(qiáng)依賴于這個(gè)屬性做需求。
它還有一系列的屬性，有興趣的話可以挨個(gè)試一下。
以上就是JavaScript CSS解析B站的彈幕可以不擋人物原理及技巧的詳細(xì)內(nèi)容，更多關(guān)于JavaScript CSS彈幕不擋人的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
js獲取圖片base64的正確實(shí)現(xiàn)方式
這篇文章主要給大家介紹了關(guān)于js獲取圖片base64的正確實(shí)現(xiàn)方式,BLOB是二進(jìn)制大對(duì)象,是一個(gè)可以存儲(chǔ)二進(jìn)制文件的容器,?在計(jì)算機(jī)中BLOB常常是數(shù)據(jù)庫中用來存儲(chǔ)二進(jìn)制文件的字段類型,需要的朋友可以參考下2024-01-01
這篇文章主要為大家詳細(xì)介紹了Bootstrap?table列上下移動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
這篇文章主要介紹了淺析BootStrap柵格系統(tǒng)的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
前端實(shí)現(xiàn)讀取word文件并將其原樣式展示的幾種方案
在前端直接讀取并原樣展示W(wǎng)ord文檔是一個(gè)相對(duì)復(fù)雜的任務(wù),因?yàn)閃ord文檔的格式(如.doc或.docx)與Web技術(shù)棧使用的格式(HTML、CSS)不兼容,這篇文章主要給大家介紹了關(guān)于前端實(shí)現(xiàn)讀取word文件并將其原樣式展示的幾種方案,需要的朋友可以參考下2024-08-08
JavaScript 復(fù)制對(duì)象與Object.assign方法無法實(shí)現(xiàn)深復(fù)制
這篇文章主要介紹了JavaScript 復(fù)制對(duì)象與Object.assign方法無法實(shí)現(xiàn)深復(fù)制，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11
JavaScript反轉(zhuǎn)數(shù)組常用的4種方法
這篇文章主要給大家介紹了關(guān)于JavaScript反轉(zhuǎn)數(shù)組常用的4種方法,反轉(zhuǎn)數(shù)組可以將數(shù)組中的元素順序顛倒過來,從而達(dá)到一些特定的需求,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07
Js中使用hasOwnProperty方法檢索ajax響應(yīng)對(duì)象的例子
這篇文章主要介紹了Js中使用hasOwnProperty方法檢索ajax響應(yīng)對(duì)象的例子,本文介紹的技巧就是hasOwnProperty方法在ajax請(qǐng)求中的使用,需要的朋友可以參考下2014-12-12
為了測(cè)試這個(gè)智能識(shí)別插件，我試了很多壁紙圖片，都能智能裁剪出圖片的主體部分，轉(zhuǎn)而嘗試了一下chrome和Firefox以及IE，發(fā)現(xiàn)IE只有10以上的版本才支持，chrome和Firefox支持，手機(jī)瀏覽器不支持，這到底是啥黑科技？？今天我們就來詳細(xì)看看2015-10-10
這篇文章主要介紹了Js模塊化的作用原理和方案，對(duì)JS模塊化感興趣的同學(xué)，可以參考下2021-04-04
js實(shí)現(xiàn)ajax的用戶簡(jiǎn)單登入功能
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)ajax的用戶簡(jiǎn)單登入功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06