最近Bステーションでスマートアンチブロッキング弾幕と呼ばれる弾幕エフェクトを見ました。これは伝説のマスク弾幕です。オンにすると、エフェクトはおそらく次のようになります アイドルや女神の比類なき美しさが派手なコメントによって遮られることを心配する必要はもうありません。魔法のようではありませんか? 実装原理は実際には PS のマスクに似ており、つまり画像の一部を「隠す」ことです。ここで使用する必要があるのは、CSS3 の mask 属性です。 CSSマスク CSS マスク属性の歴史は非常に長く、CSS3 の border-radius やその他の属性よりもさらに長いです。この属性は、2009 年頃に Safari ブラウザに初めて登場しました。しかし、当時はまだIEが主流であり、互換性を考慮して推進されていませんでした。しかし、今では IE は過去のものなので、安心して使用できます。 使い方も比較的簡単です
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 で実装する例
Yahoo チームが書いた、ウェブサイトのパフォーマンス最適化に関する記事を読みました。この記事は...
目次概要バーチャルドム原理実装プロセスパッチ方式sameVnode関数patchVnode関数upd...
img 画像タグに alt 属性を追加しますか?画像 img タグの alt 属性を見落とすことはよ...
目次1. 挿入のいくつかの構文1-1. 通常の挿入文1-2. 挿入または更新1-3. 挿入または交換...
システム提供のMySQLをアンインストールする1. MySQLがシステムにインストールされているかど...
セレクターとは何ですか?セレクターの役割は、セレクターを介して要素を見つけ、CSS スタイルを要素に...
ブラウザでのページのレンダリング時間をできるだけ短縮するにはどうすればよいでしょうか? この記事は、...
1. ファイルを現在のディレクトリに解凍しますコマンド: tar -zxvf mysql....ta...
目次1. Tomcatコードをダウンロードする2. ダウンロード後のディレクトリ構造3. ソースコー...
htmlのデフォルトの送信方法は、postではなくgetです。postに変更したい場合は、 meth...
<br />Web ページによっては、サイズは大きくないように見えても開くのに非常に時間...
序文この記事では、SQL インジェクションを回避するために pdo の前処理メソッドを使用します。詳...
この記事では、MySQL 8.0.16圧縮パッケージのインストールと設定方法を参考までに紹介します。...
導入チャートは、データ セットを読みやすくし、その各部分を区別しやすくするために使用されるデータのグ...
1. 速度制御機能を使用して、トランジション効果(加速、減速など)の速度曲線を制御します。速度制御機...