CSS3-动态视频背景效果

CSS3-动态视频背景效果

html:

<section class="video-container">
<video preload="auto" autoplay="autoplay" type="video/mp4" loop muted src="./public/banner_1.mp4"></video>
<article class="content">
<h1>美好奇妙夜,抖音有你更美好</h1>
<p>2020年抖音美好奇妙夜，超过60位明星和131位抖音创作者出现在这个舞台上。用自己积极的生活态度让你相信，世界有你更美好</p>
</article>
</section>

css:

*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
}
.video-container{
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
.video-container video{
min-width: 100%;
min-height: 100%;
position: absolute;
/* 上下左右都给0，这样可以实现“拉伸”的效果 */
left: 0;
top: 0;
bottom: 0;
right: 0;
/* 让他的层级往下 走一下，这样我们就可以看见 文字 了 */
z-index: -1;
}
.video-container .content{
width: 60%;
position: absolute;
top: 45%;
left: 50%;
/* css3实现文字居中 */
transform: translate(-50%,-50%);
text-align: center;
}
.video-container .content h1{
font-family: Arial, Helvetica, sans-serif;
font-size: 3em;
margin: 10px 0;
color: #fff;
text-transform: uppercase;
}
.video-container .content p{
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
line-height: 1em;
margin: 10px 0;
color: #fff;
text-transform: uppercase;
}