CSS 3.0とビデオを組み合わせることでクリエイティブなオープニング効果を実現

CSS 3.0 とビデオを組み合わせて実現したクリエイティブなオープニングをご紹介します。効果は次のとおりです。

ここに画像の説明を挿入

以下はコード実装です。コピーして貼り付け、収集していただいて結構です。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <meta http-equiv="X-UA-compatible" content="ie=edge">
    <title>CSS 3.0と動画を組み合わせて実現したクリエイティブなオープニング</title>
    <スタイル>
        * {
            マージン: 0;
            パディング: 0;
            フォントファミリー: 'Poppins'、サンセリフ;
        }
        体 {
            ディスプレイ: フレックス;
            アイテムの位置を中央揃えにします。
            コンテンツの中央揃え: 中央;
            最小高さ: 100vh;
            背景: #000;
        }
        h2 {
            位置: 相対的;
            フォントサイズ: 3.4em;
            フォントの太さ: 900;
            色: #fff;
            zインデックス: 1;
            オーバーフロー: 非表示;
            マージン: 20px 20px 0 0;
        }
        h2 スパン {
            色: #ff022c;
        }
        h2::before {
            コンテンツ： '';
            位置: 絶対;
            左: -20%;
            幅: 120%;
            高さ: 100%;
            背景: 線形グラデーション(90度、透明0%、#000 5%、#000 100%);
            アニメーション: 5.5 秒の直線前進アニメーション。
            アニメーション遅延: 2秒;
        }
        @keyframes アニメーション {
            0% {
                左: -20%;
            }
            100% {
                左: 110%;
            }
        }
        ビデオ
            位置: 絶対;
            上: 0;
            左: 0;
            幅: 100%;
            高さ: 100%;
            オブジェクトフィット: カバー;
            zインデックス: 2;
            ポインタイベント: なし;
            ミックスブレンドモード: スクリーン;
        }
    </スタイル>
</head>
<本文>
    <video src="https://klxxcdn.oss-cn-hangzhou.aliyuncs.com/histudy/hrm/media/08reverse.mp4" 自動再生ミュート></video>
    <h2><span>私たちは</span>COVID-19に</span>注意を払わなければなりません</span></h2>
</本文>
</html>

要約する

CSS 3.0と動画を組み合わせたクリエイティブなオープニングについての記事はこれで終わりです。CSS動画オープニングに関する関連コンテンツは、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも123WORDPRESS.COMをよろしくお願いいたします。

<<: WeChatアプレットの入力レベルとテキストエリアレベルの浸透率が高すぎる問題の解決策

>>: iframe子ページは親ページを操作し、ページポップアップレイヤーをシールドする効果を実装します。