Creative opening effect achieved by combining CSS 3.0 with video

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

Recommend

Summary of the differences between Vue's watch, computed, and methods

Table of contents 1 Introduction 2 Basic usage 2....

A must-read career plan for web design practitioners

Original article, please indicate the author and ...

Advantages of MySQL covering indexes

A common suggestion is to create indexes for WHER...

MySQL scheduled task implementation and usage examples

This article uses examples to illustrate the impl...

JavaScript to implement voice queuing system

Table of contents introduce Key Features Effect d...

Interviewer asked how to achieve a fixed aspect ratio in CSS

You may not have had any relevant needs for this ...

How to implement controllable dotted line with CSS

Preface Using css to generate dotted lines is a p...

Docker deployment RabbitMQ container implementation process analysis

1. Pull the image First, execute the following co...

Vue+axios sample code for uploading pictures and recognizing faces

Table of contents Axios Request Qs processing dat...

js realizes horizontal and vertical sliders

Recently, when I was doing a practice project, I ...

VMWare virtual machine 15.X LAN network configuration tutorial diagram

Recently, I have been working on several virtual ...

Setting up shared folders in Ubuntu virtual machine of VMWare14.0.0

This is my first blog post. Due to time constrain...

Linux general java program startup script code example

Although the frequency of starting the shell is v...

Docker core and specific use of installation

1. What is Docker? (1) Docker is an open source t...

HTML Editing Basics (A Must-Read for Newbies)

Open DREAMWEAVER and create a new HTML. . Propert...