HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="xxx.css">
<title>Document</title>
</head>
<body>
<div class="one">
<video autoplay muted loop>
<!-- autoplay自动播放 controls显示控件 muted静音 loop循环播放 -->
<source src="E:/Personal/Video/mylivewallpapers.com-Futuristic-Room-Apartment.mp4" type="video/mp4">
</video>
<divl class="content">
<h1>爱输给爱</h1>
<p>姐姐，原谅我和小舅合伙欺骗了你，以你对我的疼爱，没有小舅的配合，我恐怕踏不出那个家门。作为村子里第一个也是目前唯一一个女大学生，村长已经给家里报了喜，弟弟为你高兴。弟弟不是读书的料，我和小舅去省城打工了，从今往后，你的一切开支，就由我来承担。</p>
<p>月台上，一个女孩子，蹲下身双手抱头，泣不成声……</p>
</divl>
</div>
</body>
</html>
LESS
@import url('https://fonts.googleapis.com/css2?family=Long+Cang&display=swap');
@import url('https://fonts.googleapis.com/css2?family=ZCOOL+XiaoWei&display=swap');
*{
margin: 0;
padding: 0;
font-family: 'Long Cang', cursive;
.one{
width: 100%;
height: 100%;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
video{
position: absolute;
top: 0;
left: 0;
object-fit: cover;
width: 100%;
height: 100%;
pointer-events: none; //是否对指针事件做出反应，none|auto
}
.content{
position:absolute;
z-index: 1;
max-width: 1000px;
top:50%;
transform: translateY(-50%);
user-select: none;
h1{
text-align: center;
font-size: 70px;
text-transform: uppercase;
color: #fff;
margin-bottom: 20px;
text-shadow: 0 0 10px #f368e0 ,0 0 15px #48dbfb,0 0 13px #1dd1a1 ;
}
p{
line-height: 33px;
text-indent: 2em;
color: #fff;
font-size: 30px;
font-family: 'ZCOOL XiaoWei', serif;
text-shadow: 0 0 5px #54a0ff,0 0 10px #0abde3;
}
}
}
}
ScreenShot_20210512201702.png
-----2021/05/12
