經過css3實現蒙版彈幕

最近在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) }

再看看效果

蒙版彈幕完成~~~！