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

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

青灯夜游
青灯夜游転載
2022-11-01 10:17:132375ブラウズ

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

- 終了 -

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

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

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