CSS3: 常见的视频背景网页

截图：

思路：

其实很简单，就是有个header和下面的2个section。section是用来展示下面的描述文字的。

重点是header:有3个div.

第一个div是包裹viedeo的。

第2个div是做蒙版用的。

第3 个div就是展示上面图中看到的描述和按钮""let me love you "

最后使用了@media适配移动端.

其实，应该注意的是，当写完后在浏览器中打开不管窗口多大，我们只能看到header，这是因为尺寸单位vw和vh的功劳。

当我们往下翻动的时候才会看到2个section.

源代码：

<!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>视频背景</title>
    <style>
        *{
            box-sizing: border-box;
        }

        body{
            margin: 0;
            font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
            font-size: 1rem;
            line-height: 1.5;
            color: #333;
            overflow-x: hidden;
        }

        .v-header{
            height: 100vh;
            display: flex;
            align-items: center;
            color: #fff;
        }

        .container{
            max-width: 960px;
            padding-left: 1rem;
            padding-right: 1rem;
            margin: auto;
            text-align: center;
        }

        .fullscreen-video-wrap{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            overflow: hidden;
        }

        .fullscreen-video-wrap  video{
            min-width: 100%;
            min-height: 100%;
        }

        .header-overlay{
            height: 100vh;
            width: 100vw;
            position: absolute;
            top: 0;
            left: 0;
            background: #225470;
            z-index: 1;
            opacity: .4;
        }


        .header-content{
            z-index: 2;
        }

        .header-content h1 {
            font-size: 4rem;
            margin-bottom: 0;
        }

        .header-content p {
            font-size: 1.5rem;
            padding-bottom: 2rem;
        }

        .btn{
            background: #34d340;
            color: #fff;
            font-size: 1.2rem;
            text-decoration: none;
            padding: 1rem 2rem;
        }

        .section{
            padding: 1rem 0;
        }

        .section-b{
            background: #333;
            color: #fff;
        }

        @media(max-width: 960px){
            .container{
                padding-left: 3rem;
                padding-right: 3rem;
            }
        }
    </style>
</head>
<body>
    <header class="v-header container">
        <div class="fullscreen-video-wrap">
            <video src="./bg_video.mp4" autoplay="true" loop="true"></video>
        </div>
        <!-- 蒙板 -->
        <div class="header-overlay">

        </div>
        <div class="header-content">
            <h1>Yin Lei.</h1>
            <p>Baby,if you still love me, i will give you my the whole life.</p>
            <a href="#" class="btn">let me love you.</a>
        </div>
    </header>

    <section class="section section-a">
        <div class="container">
            <h2>About Love.</h2>
            <p>
                Because i love you so much, i have to leave you.
            </p>
        </div>
    </section>

    <section class="section section-b">
        <div class="container">
            <h2>Make friends</h2>
            <p>
                Dear girl,will you be my baby?
            </p>
        </div>
    </section>
</body>
</html>

所爱隔山海。

发布了268 篇原创文章 · 获赞 36 · 访问量 8万+

私信关注

CSS3: 常见的视频背景网页

猜你喜欢