欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript?CSS解析B站的彈幕可以不擋人物原理及技巧

 更新時間：2023年01月18日 09:08:24   作者：錢得樂  
這篇文章主要為大家介紹了JavaScript?CSS解析B站的彈幕可以不擋人物原理及技巧，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

正文

那天在B站看視頻的時候偶然發(fā)現(xiàn)當字幕遇到人物的時候就被裁切了，不會擋住人物，覺得很神奇，于是決定一探究竟。

高端的效果，往往只需要采用最樸素的實現(xiàn)方式，忙碌了兩個小時，陳師傅打開了F12，豁然開朗。一張圖片+一個屬性，直接搞定。

demo

為了印證我的想法，我決定自己寫一個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>

效果是這樣的

加一個紅背景，看的清楚一些

至此我們就實現(xiàn)了B站同款的不遮擋人物的彈幕。至于這張圖片是怎么來的，肯定是AI識別出來然后生成的，一張圖片也就一兩K，一次加載很多張也不會造成很大的負擔。

最后來看看這個神奇的css屬性吧

developer.mozilla.org/zh-CN/docs/…

Experimental:  這是一個實驗中的功能

所以在開發(fā)需求的時候可以把它當成一個亮點使用，但是不能強依賴于這個屬性做需求。

它還有一系列的屬性，有興趣的話可以挨個試一下。

以上就是JavaScript CSS解析B站的彈幕可以不擋人物原理及技巧的詳細內容，更多關于JavaScript CSS彈幕不擋人的資料請關注腳本之家其它相關文章！

相關文章

  • js獲取圖片base64的正確實現(xiàn)方式

    js獲取圖片base64的正確實現(xiàn)方式

    這篇文章主要給大家介紹了關于js獲取圖片base64的正確實現(xiàn)方式,BLOB是二進制大對象,是一個可以存儲二進制文件的容器,?在計算機中BLOB常常是數(shù)據(jù)庫中用來存儲二進制文件的字段類型,需要的朋友可以參考下
    2024-01-01
  • Bootstrap?table列上下移動效果

    Bootstrap?table列上下移動效果

    這篇文章主要為大家詳細介紹了Bootstrap?table列上下移動效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2022-02-02
  • 淺析BootStrap柵格系統(tǒng)

    淺析BootStrap柵格系統(tǒng)

    這篇文章主要介紹了淺析BootStrap柵格系統(tǒng)的相關資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下
    2016-06-06
  • 前端實現(xiàn)讀取word文件并將其原樣式展示的幾種方案

    前端實現(xiàn)讀取word文件并將其原樣式展示的幾種方案

    在前端直接讀取并原樣展示W(wǎng)ord文檔是一個相對復雜的任務,因為Word文檔的格式(如.doc或.docx)與Web技術棧使用的格式(HTML、CSS)不兼容,這篇文章主要給大家介紹了關于前端實現(xiàn)讀取word文件并將其原樣式展示的幾種方案,需要的朋友可以參考下
    2024-08-08
  • JavaScript 復制對象與Object.assign方法無法實現(xiàn)深復制

    JavaScript 復制對象與Object.assign方法無法實現(xiàn)深復制

    這篇文章主要介紹了JavaScript 復制對象與Object.assign方法無法實現(xiàn)深復制，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-11-11
  • JavaScript反轉數(shù)組常用的4種方法

    JavaScript反轉數(shù)組常用的4種方法

    這篇文章主要給大家介紹了關于JavaScript反轉數(shù)組常用的4種方法,反轉數(shù)組可以將數(shù)組中的元素順序顛倒過來,從而達到一些特定的需求,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
    2023-07-07
  • Js中使用hasOwnProperty方法檢索ajax響應對象的例子

    Js中使用hasOwnProperty方法檢索ajax響應對象的例子

    這篇文章主要介紹了Js中使用hasOwnProperty方法檢索ajax響應對象的例子,本文介紹的技巧就是hasOwnProperty方法在ajax請求中的使用,需要的朋友可以參考下
    2014-12-12
  • smartcrop.js智能圖片裁剪庫

    smartcrop.js智能圖片裁剪庫

    為了測試這個智能識別插件，我試了很多壁紙圖片，都能智能裁剪出圖片的主體部分，轉而嘗試了一下chrome和Firefox以及IE，發(fā)現(xiàn)IE只有10以上的版本才支持，chrome和Firefox支持，手機瀏覽器不支持，這到底是啥黑科技？？今天我們就來詳細看看
    2015-10-10
  • 詳解Js模塊化的作用原理和方案

    詳解Js模塊化的作用原理和方案

    這篇文章主要介紹了Js模塊化的作用原理和方案，對JS模塊化感興趣的同學，可以參考下
    2021-04-04
  • js實現(xiàn)ajax的用戶簡單登入功能

    js實現(xiàn)ajax的用戶簡單登入功能

    這篇文章主要為大家詳細介紹了js實現(xiàn)ajax的用戶簡單登入功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2020-06-06

最新評論