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

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

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

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

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

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