视频背景制作法
视频背景制作法
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>全屏视频背景</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<header class="v-header container">
<div class="fullscreen-video-wrap">
<video src="./Typing_light_01_Videvo.mp4" autoplay="true" loop="true">
</video>
</div>
<div class="header-overlay"></div>
<div class="header-content text-md-center">
<h1>Welcome Everyone</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Id temporibus perferendis necessitatibus numquam amet
impedit explicabo? Debitis quasi ullam aperiam!</p>
<a class="btn">Find Out More</a>
</div>
</header>
<section class="section section-a">
<div class="container">
<h2>Section A</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Unde, impedit amet minima iste autem cumque et
maiores blanditiis doloribus aut dolorum quaerat non est voluptatum, tempore ut dolorem voluptas quod quae
accusantium, ex inventore ducimus. Beatae mollitia exercitationem, quam similique, consectetur ratione
reprehenderit delectus neque eligendi facere soluta dolor ducimus!</p>
</div>
</section>
<section class="section section-b">
<div class="container">
<h2>Section B</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Unde, impedit amet minima iste autem cumque et
maiores blanditiis doloribus aut dolorum quaerat non est voluptatum, tempore ut dolorem voluptas quod quae
accusantium, ex inventore ducimus. Beatae mollitia exercitationem, quam similique, consectetur ratione
reprehenderit delectus neque eligendi facere soluta dolor ducimus!</p>
</div>
</section>
</body>
</html>
index.css
*{
box-sizing: border-box;
}
body{
margin:0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size:1rem;
font-weight:normal;
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-height:100%;
min-width:100%;
}
.header-overlay{
height:100vh;
position: absolute;
top:0;
left:0;
width:100vw;
z-index:1;
background:#225470;
opacity:0.85;
}
.header-content{
z-index:2;
}
.header-content h1{
font-size:50px;
margin-bottom:0;
}
.header-content p{
font-size:1.5rem;
display:block;
padding-bottom:2rem;
}
.btn{
background: #34b3a0;
color:#fff;
font-size:1.2rem;
padding: 1rem 2rem;
text-decoration: none;
}
.section{
padding:20px 0;
}
.section-b{
background:#333;
color:#fff;
}
@media(max-width:960px){
.container{
padding-right:3rem;
padding-left:3rem;
}
}
查看效果
版权声明:
作者:applek
链接:https://aifree.fun/archives/63
来源:Lovestu
文章版权归作者所有,未经允许请勿转载。
THE END