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自動(dòng)播放 controls顯示控件 muted靜音 loop循環(huán)播放 -->
<source src="E:/Personal/Video/mylivewallpapers.com-Futuristic-Room-Apartment.mp4" type="video/mp4">
</video>
<divl class="content">
<h1>愛輸給愛</h1>
<p>姐姐灵奖，原諒我和小舅合伙欺騙了你，以你對(duì)我的疼愛估盘，沒有小舅的配合瓷患，我恐怕踏不出那個(gè)家門。作為村子里第一個(gè)也是目前唯一一個(gè)女大學(xué)生遣妥，村長(zhǎng)已經(jīng)給家里報(bào)了喜擅编，弟弟為你高興。弟弟不是讀書的料箫踩，我和小舅去省城打工了爱态，從今往后，你的一切開支境钟，就由我來承擔(dān)锦担。</p>
<p>月臺(tái)上，一個(gè)女孩子慨削，蹲下身雙手抱頭洞渔，泣不成聲……</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; //是否對(duì)指針事件做出反應(yīng)，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
