Creative opening effect achieved by combining CSS 3.0 with video

Let me share with you a creative opening realized by combining CSS 3.0 with video. The effect is as follows:

insert image description here

The following is the code implementation, you are welcome to copy, paste and collect it.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Creative opening realized by CSS 3.0 combined with video</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            font-family: 'Poppins', sans-serif;
        }
        body {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            background: #000;
        }
        h2 {
            position: relative;
            font-size: 3.4em;
            font-weight: 900;
            color: #fff;
            z-index: 1;
            overflow: hidden;
            margin: 20px 20px 0 0;
        }
        h2 span {
            color: #ff022c;
        }
        h2::before {
            content: '';
            position: absolute;
            left: -20%;
            width: 120%;
            height: 100%;
            background: linear-gradient(90deg, transparent 0%, #000 5%, #000 100%);
            animation: animate 5.5s linear forwards;
            animation-delay: 2s;
        }
        @keyframes animate {
            0% {
                left: -20%;
            }
            100% {
                left: 110%;
            }
        }
        video
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 2;
            pointer-events: none;
            mix-blend-mode: screen;
        }
    </style>
</head>
<body>
    <video src="https://klxxcdn.oss-cn-hangzhou.aliyuncs.com/histudy/hrm/media/08reverse.mp4" autoplay muted></video>
    <h2><span>We</span> must</span>te</span>al</span>give</span>e</span>ss COVID-19</h2>
</body>
</html>

Summarize

This is the end of this article about the creative opening achieved by combining CSS 3.0 with video. For more relevant CSS video opening content, please search 123WORDPRESS.COM’s previous articles or continue to browse the related articles below. I hope that everyone will support 123WORDPRESS.COM in the future!

<<: Solution to the problem of too high penetration of input and textarea levels in WeChat applet

>>: The iframe child page operates the parent page and implements the effect of shielding the page pop-up layer