创建具有视频背景的网站| HTML和CSS
【摘要】 🌊 作者主页：海拥🌊 简介：🏆CSDN全栈领域优质创作者、🥇HDZ核心组成员、🥈蝉联C站周榜前十🌊 粉丝福利：粉丝群 每周送6~9本书，不定期送各种小礼品，往期获奖公布创建具有视频背景的网站| HTML和CSS 。使用HTML和CSS在您的网站上添加Glass效果。为初学者学习HTML的简便方法演示地址：https://wanghao221.github.io/video-bac...
🌊 作者主页：海拥
🌊 简介：🏆CSDN全栈领域优质创作者、🥇HDZ核心组成员、🥈蝉联C站周榜前十
🌊 粉丝福利：粉丝群 每周送6~9本书，不定期送各种小礼品，往期获奖公布
创建具有视频背景的网站| HTML和CSS 。使用HTML和CSS在您的网站上添加Glass效果。为初学者学习HTML的简便方法
演示地址：https://wanghao221.github.io/video-background/
HTML代码
这是基本的HTML，对所有HTML文件都很重要。我使用Google的样式在此HTML文件中导入Poppins，因为大多数人的设备上没有Poppins字体。
<!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>Video Landing Page</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/f06b392053.js" crossorigin="anonymous"></script>
</head>
<body>
<section class="showcase">
<header>
<h2 class="logo">Website Makers</h2>
<div class="toggle"></div>
</header>
<video src="./video.mp4" muted loop autoplay></video>
<div class="overlay"></div>
<div class="text">
<h2>Naver Stop</h2>
<h3>Exploring The World</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus iste unde accusantium natus
doloribus sint dolores blanditiis quo eum atque?</p>
<a href="#">Explore</a>
</div>
<ul class="social">
<li><i class="fab fa-facebook"></i></li>
<li><i class="fab fa-twitter"></i></li>
<li><i class="fab fa-instagram"></i></li>
</ul>
</section>
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Design</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<script>
const menuToggle = document.querySelector('.toggle')
const showcase = document.querySelector('.showcase')
menuToggle.addEventListener('click', () => {
menuToggle.classList.toggle('active')
showcase.classList.toggle('active')
})
</script>
</body>
</html>
view rawvideo.html hosted with ❤ by GitHub
CSS Code
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,500;0,600;0,800;1,400&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins',sans-serif;
}
.showcase{
position: absolute;
right: 0;
width: 100%;
min-height: 100vh;
padding: 100px;
display: flex;
justify-content: space-between;
align-items: center;
background: #111;
color: #fff;
z-index: 2;
transition: 0.5s;
}
.showcase.active{
right: 300px;
}
.showcase header{
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 40px 100px;
z-index: 1000;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo{
text-transform: uppercase;
cursor: pointer;
}
.toggle{
position: relative;
width: 60px;
height: 60px;
background: no-repeat url('toggle.jpg');
background-size: 50px;
background-position: center;
cursor: pointer;
}
.toggle.active{
background: no-repeat url('cross.png');
background-size: 30px;
background-position: center;
}
.menu{
position: absolute;
top: 0;
right: 0;
width: 300px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.menu ul{
position: relative;
list-style: none;
}
.menu ul li a{
text-decoration: none;
font-size: 24px;
color: #111;
}
.menu ul li a:hover{
color: #03a9f4;
}
.showcase video{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.8;
}
.overlay{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #03a9f4;
mix-blend-mode: overlay;
}
.text,.social{
position: relative;
z-index: 10;
}
.text h2{
font-size: 5rem;
font-weight: 800;
line-height: 1em;
text-transform: uppercase;
}
.text h3{
font-size: 4rem;
font-weight: 700;
line-height: 1em;
text-transform: uppercase;
}
.text p{
font-size: 1.1em;
margin: 20px 0;
font-weight: 400;
max-width: 700px;
}
.text a{
display: inline-block;
font-size: 1em;
background: #fff;
padding: 10px 30px;
text-decoration: none;
color: #111;
margin-top: 10px;
text-transform: uppercase;
letter-spacing: 2px;
}
.text a:hover{
letter-spacing: 6px;
}
.social{
position: absolute;
bottom: 20px;
display: flex;
justify-content: center;
align-items: center;
}
.social li{
list-style: none;
margin: 0 20px;
font-size: 20px
}
@media(max-width:798px) {
.showcase, .showcase header{
padding: 40px;
}
.text h2{
font-size: 3em;
}
.text h3{
font-size: 2em;
}
}
view rawvideo.css hosted with ❤ by GitHub
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）