使用css3怎么實(shí)現(xiàn)一個(gè)蒙版彈幕功能

今天就跟大家聊聊有關(guān)使用css3怎么實(shí)現(xiàn)一個(gè)蒙版彈幕功能，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

css是什么意思

css是一種用來(lái)表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語(yǔ)言，主要是用來(lái)設(shè)計(jì)網(wǎng)頁(yè)的樣式，使網(wǎng)頁(yè)更加美化。它也是一種定義樣式結(jié)構(gòu)如字體、顏色、位置等的語(yǔ)言，并且css樣式可以直接存儲(chǔ)于HTML網(wǎng)頁(yè)或者單獨(dú)的樣式單文件中，而樣式規(guī)則的優(yōu)先級(jí)由css根據(jù)這個(gè)層次結(jié)構(gòu)決定，從而實(shí)現(xiàn)級(jí)聯(lián)效果，發(fā)展至今，css不僅能裝飾網(wǎng)頁(yè)，也可以配合各種腳本對(duì)于網(wǎng)頁(yè)進(jìn)行格式化。

<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的時(shí)候會(huì)覆蓋下面的元素，為1的時(shí)候會(huì)完全顯示下面的內(nèi)容。效果大概是這樣：

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

好了，有了這個(gè)屬性我們就可以愉快的實(shí)現(xiàn)蒙版彈幕了

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

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

顯示代碼如下：

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);
}

先看下效果：

好吧，什么也看不出來(lái)。不過(guò)實(shí)際上人物已經(jīng)加上了蒙版

加點(diǎn)彈幕試試效果。

添加彈幕動(dòng)畫(huà)效果和樣式

@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腳本

// 生成一個(gè)0~range的隨機(jī)數(shù)
    const geneNumber = range => Math.floor(Math.random() * range)
    var barrages = [
      '空降成功', '真香警告', '溫馨提示，前方請(qǐng)調(diào)高音量/趕緊戴耳機(jī)', '彈幕護(hù)體！彈幕護(hù)體！彈幕護(hù)體！', ' 以上企業(yè)均已破產(chǎn)', '前方高能', '我從未見(jiàn)過(guò)如此厚顏無(wú)恥之人', '完結(jié)撒花',
      '空降成功', '真香警告', '溫馨提示，前方請(qǐng)調(diào)高音量/趕緊戴耳機(jī)', '彈幕護(hù)體！彈幕護(hù)體！彈幕護(hù)體！', ' 以上企業(yè)均已破產(chǎn)', '前方高能', '我從未見(jiàn)過(guò)如此厚顏無(wú)恥之人', '完結(jié)撒花',
      '空降成功', '真香警告', '溫馨提示，前方請(qǐng)調(diào)高音量/趕緊戴耳機(jī)', '彈幕護(hù)體！彈幕護(hù)體！彈幕護(hù)體！', ' 以上企業(yè)均已破產(chǎn)', '前方高能', '我從未見(jiàn)過(guò)如此厚顏無(wú)恥之人', '完結(jié)撒花',
      '空降成功', '真香警告', '溫馨提示，前方請(qǐng)調(diào)高音量/趕緊戴耳機(jī)', '彈幕護(hù)體！彈幕護(hù)體！彈幕護(hù)體！', ' 以上企業(yè)均已破產(chǎn)', '前方高能', '我從未見(jiàn)過(guò)如此厚顏無(wú)恥之人', '完結(jié)撒花',
      '空降成功', '真香警告', '溫馨提示，前方請(qǐng)調(diào)高音量/趕緊戴耳機(jī)', '彈幕護(hù)體！彈幕護(hù)體！彈幕護(hù)體！', ' 以上企業(yè)均已破產(chǎn)', '前方高能', '我從未見(jiàn)過(guò)如此厚顏無(wú)恥之人', '完結(jié)撒花',
      '空降成功', '真香警告', '溫馨提示，前方請(qǐng)調(diào)高音量/趕緊戴耳機(jī)', '彈幕護(hù)體！彈幕護(hù)體！彈幕護(hù)體！', ' 以上企業(yè)均已破產(chǎn)', '前方高能', '我從未見(jiàn)過(guò)如此厚顏無(wú)恥之人', '完結(jié)撒花',
      '空降成功', '真香警告', '溫馨提示，前方請(qǐng)調(diào)高音量/趕緊戴耳機(jī)', '彈幕護(hù)體！彈幕護(hù)體！彈幕護(hù)體！', ' 以上企業(yè)均已破產(chǎn)', '前方高能', '我從未見(jiàn)過(guò)如此厚顏無(wú)恥之人', '完結(jié)撒花',
    ]
    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' // 彈幕的位置不能超過(guò)容器的高度
      block.style.animation = `barrage ${geneNumber(20)}s linear ${geneNumber(60)}s` // 隨機(jī)動(dòng)畫(huà)效果
      block.textContent = item
      wrapper.appendChild(block)
    }

看完上述內(nèi)容，你們對(duì)使用css3怎么實(shí)現(xiàn)一個(gè)蒙版彈幕功能有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。