その日、ステーション B でビデオを見ていたとき、字幕が文字に接すると切り取られ、文字が遮られないことを偶然発見しました。すごいと思いました。 、ということで調べてみることにしました。
ハイエンドのエフェクトでは、最も単純な実装方法しか必要としないことがよくあります。2 時間の忙しい作業の後、マスター チェンは F12 をオンにして、突然啓発されました。 1 つの画像と 1 つの属性を直接実行できます。 [学習ビデオ共有: css ビデオ チュートリアル 、Web フロントエンド ]
私のアイデアを確認するために、自分でデモを書くことにしました。
<!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 ステーションと同様の弾幕を実現できました。 この画像がどこから来たのかというと、AIが認識して生成したものでしょうし、1枚あたり1~2K程度なので、一度にたくさんの画像を読み込んでも大きな負担にはなりません。 最後に、この魔法の CSS 属性
mask-image: https://developer.mozilla.org/zh-CN/docs/Web/CSS/ を見てみましょう。マスク画像。
実験的: これは実験的な機能です。この機能は一部のブラウザではまだ開発中であり、ブラウザごとに使用に適したプレフィックスは異なります。 したがって、要件を作成するときにこれをハイライトとして使用できますが、要件を作成する際にこの属性に大きく依存することはできません。 ここには一連の属性もありますので、興味があれば 1 つずつ試してみてください。 - 終了 -プログラミング関連の知識については、プログラミング ビデオ をご覧ください。 !