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

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(ブロック)
    }

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

要約する

以上が、CSS3 に基づくマスク弾幕機能のエディターによる紹介です。皆様のお役に立てれば幸いです。ご質問がございましたら、メッセージを残していただければ、すぐに返信させていただきます。

<<:  GitHub のサードパーティ認証方式を Vue で実装する例

>>:  インターフェース設計の10の一般的なルール

推薦する

ウェブサイトのフロントエンドパフォーマンスの最適化: JavaScript と CSS

Yahoo チームが書いた、ウェブサイトのパフォーマンス最適化に関する記事を読みました。この記事は...

Vueのdiffアルゴリズムについての簡単な説明

目次概要バーチャルドム原理実装プロセスパッチ方式sameVnode関数patchVnode関数upd...

img 画像タグに alt 属性を付与する必要がありますか?

img 画像タグに alt 属性を追加しますか?画像 img タグの alt 属性を見落とすことはよ...

MySQL の挿入ステートメントの使用実体験

目次1. 挿入のいくつかの構文1-1. 通常の挿入文1-2. 挿入または更新1-3. 挿入または交換...

Linux CentOS 6.5 のアンインストール、tar、および MySQL のインストールチュートリアル

システム提供のMySQLをアンインストールする1. MySQLがシステムにインストールされているかど...

CSS セレクタの 4 つのカテゴリ: 基本、組み合わせ、属性、疑似クラス

セレクターとは何ですか?セレクターの役割は、セレクターを介して要素を見つけ、CSS スタイルを要素に...

ページのレンダリング時間を短縮してページの実行速度を速めます

ブラウザでのページのレンダリング時間をできるだけ短縮するにはどうすればよいでしょうか? この記事は、...

Linux システムで MySQL データベースの解凍バージョンをインストールして構成する方法

1. ファイルを現在のディレクトリに解凍しますコマンド: tar -zxvf mysql....ta...

Tomcatソースコードをideaにインポートする方法

目次1. Tomcatコードをダウンロードする2. ダウンロード後のディレクトリ構造3. ソースコー...

フォームのデフォルトの送信方法を変更する方法

htmlのデフォルトの送信方法は、postではなくgetです。postに変更したい場合は、 meth...

ウェブページのメモリとCPU使用量を削減する方法

<br />Web ページによっては、サイズは大きくないように見えても開くのに非常に時間...

PDO を使用して SQL インジェクションを防ぐ原理の分析

序文この記事では、SQL インジェクションを回避するために pdo の前処理メソッドを使用します。詳...

MySQL 8.0.16 圧縮パッケージのインストールと設定方法のグラフィックチュートリアル

この記事では、MySQL 8.0.16圧縮パッケージのインストールと設定方法を参考までに紹介します。...

RoughViz を使用して Vue.js でスケッチされたチャートを視覚化する方法

導入チャートは、データ セットを読みやすくし、その各部分を区別しやすくするために使用されるデータのグ...

CSS3は遷移を高速化し、遅延させる

1. 速度制御機能を使用して、トランジション効果(加速、減速など)の速度曲線を制御します。速度制御機...