创建具有视频背景的网站| HTML和CSS
创建具有视频背景的网站| HTML和CSS 。使用HTML和CSS在您的网站上添加Glass效果。为初学者学习HTML的简便方法
演示地址：https://wanghao221.github.io/video-background/
HTML代码
这是基本的HTML，对所有HTML文件都很重要。我使用Google的样式在此HTML文件中导入Poppins，因为大多数人的设备上没有Poppins字体。
<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 Pagetitle>
<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 Makersh2>
<div class="toggle">div>
header>
<video src="./video.mp4" muted loop autoplay>video>
<div class="overlay">div>
<div class="text">
<h2>Naver Stoph2>
<h3>Exploring The Worldh3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus iste unde accusantium natus
doloribus sint dolores blanditiis quo eum atque?p>
<a href="#">Explorea>
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="#">Homea>li>
<li><a href="#">Newsa>li>
<li><a href="#">Designa>li>
<li><a href="#">Bloga>li>
<li><a href="#">Contacta>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
源码获取
1.CSDN下载地址：
https://download.csdn.net/download/qq_44273429/16912830
2.关注作者公众号啦啦啦好想biu点什么回复视频背景免费获取
长按保存识别
后面我还会持续更新类似免费好玩的H5小游戏、Java小游戏、好玩、实用的项目和软件等等
相关内容
-
基于HTML/CSS的响应式俄罗斯套娃ʕ •ᴥ•ʔ小游戏
-
2021年50个酷炫的Web和移动项目创意
-
史上最强最全“炸金花”攻略(涉及概率论及排列组合+py3模拟)
-
使用HTML，CSS和JavaScript创建Chrome扩展程序
-
基于HTML/CSS的勇敢的兔子疯狂奔跑小游戏
-
我是怎样制作这个逼真的红色开关的
-
25个带有酷炫动画的创意404错误页面，快给你的网站换上吧
-
惊了，开发人员的终极VueJS资源泄露
-
2021年Java各知识点综合面试题
-
高级，界面这么好看的Bootstrap模板你确定不看看？
整理不易，最后，不要忘了❤或支持一下哦