最近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 で実装する例
MySQL 8.0.13 のインストールと設定方法を皆さんと共有したいと思います。お役に立てれば幸...
ページで CSS を使用する主な方法は、スタイル属性値をインラインで追加する方法、ページ ヘッダーで...
序文多くの場合、仮想マシンを使用します。たとえば、一部のテストは検出されません。何かを壊すことを心配...
Linux のファイル権限まず、現在のディレクトリ内のファイルの内容を確認しましょう。 ls -l ...
最初のタイプ: 完全な CSS コントロール、レイヤーフローティング (ログインページに適しています...
1. はじめにこの記事では、主に Linux システムでコマンドライン ツールを使用してファイルを...
1. --cpu=<値> 1) コンテナが使用できるCPUリソースの量を指定しますが、コ...
<br />思想が東西に分かれていた時代、東洋の叡智を代表するものの一つとして「禅」は多...
1.ページを XML タイプとして宣言しないでください。ページでは UTF-8 または UTF-16...
ここ数日、ウェブサイトを初めて開いたときにアクセスが非常に遅いのですが、その後はページが正常に開きま...
1.公式サイトからインストールパッケージをダウンロードするhttp://nginx.org/en/d...
最近、画像、ビデオ、CSS/JS などの静的リソースを配置するために nginx を使用する方法を学...
序文Vue アプリケーションなどの静的ページを開発する場合、クロスドメインになる可能性のあるインター...
MySQL 複数の無関係なテーブルクエリデータとページング機能要件主キーと外部キーの関連付けがない ...
Grid は 2 次元のグリッド レイアウト システムです。これを使用すると、本質的にはハック メソ...