css3實現蒙版彈幕功能

2024-07-11 09:00:04

字體：大中小

來源：轉載

供稿：網友

最近在b站上看到一種彈幕效果叫做智能防擋彈幕，也就是傳說中的蒙版彈幕，打開之后效果大概是這樣的

再也不用擔心男神女神的絕世容顏被花里胡哨的彈幕擋住啦，是不是感覺很神奇。

實現原理其實就是類似于ps的蒙版，也就是說將圖像的一部分 “隱藏”。這里我們需要用到的是css3的mask遮罩屬性。

CSS mask

CSS mask遮罩屬性的歷史非常久遠了，遠到比CSS3 border-radius等屬性還要久遠，最早是出現在Safari瀏覽器上的，差不多可以追溯到09年。但是那個時候還是ie的天下，考慮到兼容性，所有沒有被推廣起來。不過現在，ie已經是過去式了，所以可以放心使用了。

使用起來也比較簡單

<img src="ps1.jpg" class="mask-image">

css代碼如下：

.mask-image {    width: 250px;    height: 187.5px;    -webkit-mask-image: url(mask.png);    mask-image: url(mask.png);}

蒙板可以是 CSS3 漸變或者半透明的PNG圖片，蒙板元素的alpha值為0的時候會覆蓋下面的元素，為1的時候會完全顯示下面的內容。效果大概是這樣：

關于mask的更多屬性及參數這里就不一一研究了，具體可以看這篇文章：https://www.zhangxinxu.com/wordpress/2017/11/css-css3-mask-masks/

好了，有了這個屬性我們就可以愉快的實現蒙版彈幕了

首先，需要一張底圖，模擬為視頻的某一幀的圖片

然后我們需要一個蒙版，遮住背景中的人物

顯示代碼如下：

html部分：

<div class="container">    <div class="barrage-wrapper">    </div>  </div>

css部分：

.container {  width: 900px;  height: 506px;  background: url(banner.jpg) no-repeat center;  background-size: cover;  }.barrage-wrapper {  width: 100%;  height: 100%;  position: relative;  mask-image: url(mask.png);  -webkit-mask-image: url(mask.png);}

先看下效果：

好吧，什么也看不出來。不過實際上人物已經加上了蒙版

加點彈幕試試效果。

添加彈幕動畫效果和樣式

@keyframes barrage{  from{    left:100%;    transform:translateX(0);  }  to{    left:0;    transform:translateX(-100%);  }}.block{  position:absolute;  top: 50%;  left: 100%;  width: 100%;  color: #fff;}

添加彈幕的js腳本

// 生成一個0~range的隨機數    const geneNumber = range => Math.floor(Math.random() * range)    var barrages = [      '空降成功', '真香警告', '溫馨提示，前方請調高音量/趕緊戴耳機', '彈幕護體！彈幕護體！彈幕護體！', ' 以上企業均已破產', '前方高能', '我從未見過如此厚顏無恥之人', '完結撒花',      '空降成功', '真香警告', '溫馨提示，前方請調高音量/趕緊戴耳機', '彈幕護體！彈幕護體！彈幕護體！', ' 以上企業均已破產', '前方高能', '我從未見過如此厚顏無恥之人', '完結撒花',      '空降成功', '真香警告', '溫馨提示，前方請調高音量/趕緊戴耳機', '彈幕護體！彈幕護體！彈幕護體！', ' 以上企業均已破產', '前方高能', '我從未見過如此厚顏無恥之人', '完結撒花',      '空降成功', '真香警告', '溫馨提示，前方請調高音量/趕緊戴耳機', '彈幕護體！彈幕護體！彈幕護體！', ' 以上企業均已破產', '前方高能', '我從未見過如此厚顏無恥之人', '完結撒花',      '空降成功', '真香警告', '溫馨提示，前方請調高音量/趕緊戴耳機', '彈幕護體！彈幕護體！彈幕護體！', ' 以上企業均已破產', '前方高能', '我從未見過如此厚顏無恥之人', '完結撒花',      '空降成功', '真香警告', '溫馨提示，前方請調高音量/趕緊戴耳機', '彈幕護體！彈幕護體！彈幕護體！', ' 以上企業均已破產', '前方高能', '我從未見過如此厚顏無恥之人', '完結撒花',      '空降成功', '真香警告', '溫馨提示，前方請調高音量/趕緊戴耳機', '彈幕護體！彈幕護體！彈幕護體！', ' 以上企業均已破產', '前方高能', '我從未見過如此厚顏無恥之人', '完結撒花',    ]    const wrapper = document.querySelector('.barrage-wrapper')    for (const item of barrages) {      const block = document.createElement('div')      block.classList.add('block')      block.style.top = geneNumber(486) + 'px' // 彈幕的位置不能超過容器的高度      block.style.animation = `barrage ${geneNumber(20)}s linear ${geneNumber(60)}s` // 隨機動畫效果      block.textContent = item      wrapper.appendChild(block)    }

再看看效果