一款基于video制作大气全屏的视频播放,视频为背景的文字内容布局。这是一个带有全屏视频背景的登录页。随时可以在项目中使用此登录页。继续添加节,更改视频、内容等,先来看看效果:
一部分关键的代码如下:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Video Landing Page</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section class="showcase">
<div class="video-container">
<video src="video/video.mov" autoplay muted loop></video>
</div>
<div class="content">
<h1>Shoot For The Stars</h1>
<h3>全屏视频播放</h3>
<a href="#about" class="btn">查看更多</a>
</div>
</section>
<section id="about">
<h1>关于我们</h1>
<p>
这是一个带有全屏视频背景的登录页。随时可以在项目中使用此登录页。继续添加节,更改视频、内容等
</p>
<h2>在社交媒体上关注我</h2>
</section>
</body>
</html>
全部代码:全屏的视频播放video特效