全世界只有不到1 % 的人关注了
啦啦啦好想biu点什么
创建具有视频背景的网站| 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 natusdoloribus 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
源码获取
1.CSDN下载地址：
https://download.csdn.net/download/qq_44273429/169128302.关注作者公众号【啦啦啦好想biu点什么】回复【视频背景】免费获取
后面我还会持续更新类似免费好玩的H5小游戏、Java小游戏、好玩、实用的项目和软件等等
整理不易，最后，不要忘了❤或📑支持一下哦
