CSS3はマスク連打機能を実現する

最近Bステーションでスマートアンチブロッキング弾幕と呼ばれる弾幕エフェクトを見ました。これは伝説のマスク弾幕です。オンにすると、エフェクトはおそらく次のようになります

アイドルや女神の比類なき美しさが派手なコメントによって遮られることを心配する必要はもうありません。魔法のようではありませんか?

実装原理は実際には PS のマスクに似ており、つまり画像の一部を「隠す」ことです。ここで使用する必要があるのは、CSS3 の mask 属性です。

CSSマスク

CSS マスク属性の歴史は非常に長く、CSS3 の border-radius やその他の属性よりもさらに長いです。この属性は、2009 年頃に Safari ブラウザに初めて登場しました。しかし、当時はまだIEが主流であり、互換性を考慮して推進されていませんでした。しかし、今では IE は過去のものなので、安心して使用できます。

使い方も比較的簡単です

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

CSS コードは次のとおりです。

.マスクイメージ{
    幅: 250ピクセル;
    高さ: 187.5px;
    -webkit-マスクイメージ: url(mask.png);
    マスク画像: url(mask.png);
}

マスクは CSS3 グラデーションまたは半透明の PNG 画像にすることができます。マスク要素のアルファ値が 0 の場合、下の要素が覆われます。1 の場合、下のコンテンツが完全に表示されます。効果はおそらく次のようになります:

マスクのその他のプロパティとパラメータについては、ここでは1つずつ説明しません。詳細については、こちらの記事を参照してください: https://www.zhangxinxu.com/wordpress/2017/11/css-css3-mask-masks/

さて、このプロパティを使用すると、マスクされた弾丸スクリーンを実装できます

まず、ビデオの特定のフレームの画像としてシミュレートされるベースマップが必要です。

次に、背景のキャラクターを隠すためのマスクが必要です

表示コードは次のとおりです。

HTML部分:

<div class="コンテナ">
    <div class="barrage-wrapper">
    </div>
  </div>

CSS部分:

。容器 {
  幅: 900ピクセル;
  高さ: 506px;
  背景: url(banner.jpg) 繰り返しなし 中央;
  背景サイズ: カバー;
  
}
.barrage-wrapper {
  幅: 100%;
  高さ: 100%;
  位置: 相対的;
  マスク画像: url(mask.png);
  -webkit-マスクイメージ: url(mask.png);
}

まずは効果を見てみましょう:

まあ、見るものは何もありません。しかし、実際には、そのキャラクターはマスクされています。

効果を試すために弾幕をいくつか追加します。

弾幕画面のアニメーション効果とスタイルを追加する

@keyframes 連打{
  から{
    左:100%;
    変換:translateX(0);
  }
  に{
    左:0;
    変換:translateX(-100%);
  }
}
。ブロック{
  位置:絶対;
  上位: 50%;
  左: 100%;
  幅: 100%;
  色: #fff;
}

弾幕用のjsスクリプトを追加

// 0 から範囲までの乱数を生成します。const geneNumber = range => Math.floor(Math.random() * range)
    var 弾幕 = [
      「エアドロップ成功」、「本物の匂い警告」、「親切なリマインダー、先に音量を上げて/すぐにヘッドホンをつけてください」、「弾丸スクリーン保護！」防御の集中砲火！防御の集中砲火！ '、'上記の企業はすべて倒産しました'、'前途多難'、'こんな恥知らずな人は見たことがありません'、'おめでとうございます'、
      「エアドロップ成功」、「本物の匂い警告」、「親切なリマインダー、先に音量を上げて/すぐにヘッドホンをつけてください」、「弾丸スクリーン保護！」防御の集中砲火！防御の集中砲火！ '、'上記の企業はすべて倒産しました'、'前途多難'、'こんな恥知らずな人は見たことがありません'、'おめでとうございます'、
      「エアドロップ成功」、「本物の匂い警告」、「親切なリマインダー、先に音量を上げて/すぐにヘッドホンをつけてください」、「弾丸スクリーン保護！」防御の集中砲火！防御の集中砲火！ '、'上記の企業はすべて倒産しました'、'前途多難'、'こんな恥知らずな人は見たことがありません'、'おめでとうございます'、
      「エアドロップ成功」、「本物の匂い警告」、「親切なリマインダー、先に音量を上げて/すぐにヘッドホンをつけてください」、「弾丸スクリーン保護！」防御の集中砲火！防御の集中砲火！ '、'上記の企業はすべて倒産しました'、'前途多難'、'こんな恥知らずな人は見たことがありません'、'おめでとうございます'、
      「エアドロップ成功」、「本物の匂い警告」、「親切なリマインダー、先に音量を上げて/すぐにヘッドホンをつけてください」、「弾丸スクリーン保護！」防御の集中砲火！防御の集中砲火！ '、'上記の企業はすべて倒産しました'、'前途多難'、'こんな恥知らずな人は見たことがありません'、'おめでとうございます'、
      「エアドロップ成功」、「本物の匂い警告」、「親切なリマインダー、先に音量を上げて/すぐにヘッドホンをつけてください」、「弾丸スクリーン保護！」防御の集中砲火！防御の集中砲火！ '、'上記の企業はすべて倒産しました'、'前途多難'、'こんな恥知らずな人は見たことがありません'、'おめでとうございます'、
      「エアドロップ成功」、「本物の匂い警告」、「親切なリマインダー、先に音量を上げて/すぐにヘッドホンをつけてください」、「弾丸スクリーン保護！」防御の集中砲火！防御の集中砲火！ '、'上記の企業はすべて倒産しました'、'前途多難'、'こんな恥知らずな人は見たことがありません'、'おめでとうございます'、
    ]
    const wrapper = document.querySelector('.barrage-wrapper')
    for (const 弾幕の項目) {
      const ブロック = document.createElement('div')
      ブロック.classList.add('ブロック')
      block.style.top = geneNumber(486) + 'px' // 箇条書きメッセージの位置はコンテナの高さを超えることはできません。block.style.animation = `barrage ${geneNumber(20)}s linear ${geneNumber(60)}s` // ランダムアニメーション効果 block.textContent = item
      wrapper.appendChild(ブロック)
    }

もう一度効果を見てみましょう