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の一般的なルール

推薦する

MySQL 8.0.13 のインストールと設定方法のグラフィックチュートリアル (Win10 の場合)

MySQL 8.0.13 のインストールと設定方法を皆さんと共有したいと思います。お役に立てれば幸...

Link と @import の違いを詳しく見る

ページで CSS を使用する主な方法は、スタイル属性値をインラインで追加する方法、ページ ヘッダーで...

Linux仮想マシンの静的IPアドレスを構成するための手順を完了します

序文多くの場合、仮想マシンを使用します。たとえば、一部のテストは検出されません。何かを壊すことを心配...

Linuxのファイルとフォルダの権限を操作する方法

Linux のファイル権限まず、現在のディレクトリ内のファイルの内容を確認しましょう。 ls -l ...

DIV と画像の水平および垂直の中央揃えは複数のブラウザと互換性があります

最初のタイプ: 完全な CSS コントロール、レイヤーフローティング (ログインページに適しています...

Linux でファイルをあいまい検索するのに適したコマンドは何ですか?

1. はじめにこの記事では、主に Linux システムでコマンドライン ツールを使用してファイルを...

Docker CPU 制限の実装

1. --cpu=<値> 1) コンテナが使用できるCPUリソースの量を指定しますが、コ...

デザイン理論:人間中心のデザインコンセプト

<br />思想が東西に分かれていた時代、東洋の叡智を代表するものの一つとして「禅」は多...

16 の XHTML1.0 と HTML の互換性ガイドラインの概要

1.ページを XML タイプとして宣言しないでください。ページでは UTF-8 または UTF-16...

OCSP を有効にすると、https 証明書の検証効率が向上し、Let's Encrypt SSL 証明書へのアクセスが遅くなる問題が解決されます。

ここ数日、ウェブサイトを初めて開いたときにアクセスが非常に遅いのですが、その後はページが正常に開きま...

CentOS7にNginxをインストールして自動起動を設定する方法

1.公式サイトからインストールパッケージをダウンロードするhttp://nginx.org/en/d...

リソースアップロード機能を実現するための SpringBoot+nginx の詳細な例

最近、画像、ビデオ、CSS/JS などの静的リソースを配置するために nginx を使用する方法を学...

Nginx を使用してフロントエンドのクロスドメイン問題を解決する方法

序文Vue アプリケーションなどの静的ページを開発する場合、クロスドメインになる可能性のあるインター...

複数の無関係なテーブルからデータをクエリし、MySQL でページングする方法

MySQL 複数の無関係なテーブルクエリデータとページング機能要件主キーと外部キーの関連付けがない ...

CSS グリッドレイアウトの完全ガイド

Grid は 2 次元のグリッド レイアウト システムです。これを使用すると、本質的にはハック メソ...