検索
ホームページ見出しステーション B での集中砲火による人々の妨害を防ぐためにどのようなテクノロジーが使用されているかを調べてください。

ステーション B での集中砲火による人々の妨害を防ぐためにどのようなテクノロジーが使用されているかを調べてください。

その日、ステーション B でビデオを見ていたとき、字幕が文字に接すると切り取られ、文字が遮られないことを偶然発見しました。すごいと思いました。 、ということで調べてみることにしました。

ハイエンドのエフェクトでは、最も単純な実装方法しか必要としないことがよくあります。2 時間の忙しい作業の後、マスター チェンは F12 をオンにして、突然啓発されました。 1 つの画像と 1 つの属性を直接実行できます。 [学習ビデオ共有: css ビデオ チュートリアル Web フロントエンド ]

ステーション B での集中砲火による人々の妨害を防ぐためにどのようなテクノロジーが使用されているかを調べてください。

ステーション B での集中砲火による人々の妨害を防ぐためにどのようなテクノロジーが使用されているかを調べてください。

私のアイデアを確認するために、自分でデモを書くことにしました。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .video {
      width: 668px;
      height: 376px;
      position: relative;
      -webkit-mask-image: url("mask.svg");
      -webkit-mask-size: 668px 376px;
    }
    .bullet {
      position: absolute;
      font-size: 20px;
    }
  </style>
</head>
<body>
<div>
  <div style="left: 100px; top: 0;">元芳,你怎么看</div>
  <div style="left: 200px; top: 20px;">你难道就是传说中的奶灵</div>
  <div style="left: 300px; top: 40px;">你好,我是胖灵</div>
  <div style="left: 400px; top: 60px;">这是第一集,还没有舔灵</div>
</div>
</body>
</html>

効果は次のとおりです

ステーション B での集中砲火による人々の妨害を防ぐためにどのようなテクノロジーが使用されているかを調べてください。

##より明確に見るために赤い背景を追加します:

ステーション B での集中砲火による人々の妨害を防ぐためにどのようなテクノロジーが使用されているかを調べてください。

これまでのところ、キャラクターをブロックすることなく、B ステーションと同様の弾幕を実現できました。

この画像がどこから来たのかというと、AIが認識して生成したものでしょうし、1枚あたり1~2K程度なので、一度にたくさんの画像を読み込んでも大きな負担にはなりません。

最後に、この魔法の CSS 属性

mask-image: https://developer.mozilla.org/zh-CN/docs/Web/CSS/ を見てみましょう。マスク画像

実験的: これは実験的な機能です。この機能は一部のブラウザではまだ開発中であり、ブラウザごとに使用に適したプレフィックスは異なります。

したがって、要件を作成するときにこれをハイライトとして使用できますが、要件を作成する際にこの属性に大きく依存することはできません。

ここには一連の属性もありますので、興味があれば 1 つずつ試してみてください。

ステーション B での集中砲火による人々の妨害を防ぐためにどのようなテクノロジーが使用されているかを調べてください。

- 終了 -

プログラミング関連の知識については、

プログラミング ビデオ をご覧ください。 !

声明
この記事は掘金社区で複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

mPDF

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

EditPlus 中国語クラック版

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません

PhpStorm Mac バージョン

PhpStorm Mac バージョン

最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール

WebStorm Mac版

WebStorm Mac版

便利なJavaScript開発ツール