HTML5带全屏视频背景的登陆页面

ziblog

已于 2025-06-27 15:54:51 修改

阅读量898

点赞数 11

CC 4.0 BY-SA版权

文章标签： html5 音视频 css

于 2025-04-19 14:14:17 首次发布

本文链接：https://blog.youkuaiyun.com/zichenblog/article/details/147350220

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>全屏视频背景登录页面</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Arial', sans-serif;
}

body {
overflow: hidden;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
color: white;
}

#video-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
}

.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 0;
}

.login-container {
background: rgba(0, 0, 0, 0.7);
padding: 40px;
border-radius: 10px;
width: 100%;
max-width: 400px;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
z-index: 1;
backdrop-filter: blur(5px);
animation: fadeIn 1s ease-out;
}

@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}

.logo {
text-align: center;
margin-bottom: 30px;
}

.logo h1 {
font-size: 28px;
margin-bottom: 10px;
color: #4facfe;
}

.logo p {
font-size: 14px;
opacity: 0.8;
}

.form-group {
margin-bottom: 20px;
}

.form-group label {
display: block;
margin-bottom: 8px;
font-size: 14px;
}

.form-group input {
width: 100%;
padding: 12px 15px;
border: none;
border-radius: 5px;
background: rgba(255, 255, 255, 0.1);
color: white;
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all 0.3s;
}

.form-group input:focus {
outline: none;
border-color: #4facfe;
background: rgba(255, 255, 255, 0.2);
}

.remember-forgot {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
font-size: 13px;
}

.remember-forgot a {
color: #4facfe;
text-decoration: none;
}

.btn-login {
width: 100%;
padding: 12px;
border: none;
border-radius: 5px;
background: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
color: white;
font-weight: bold;
cursor: pointer;
transition: all 0.3s;
}

.btn-login:hover {
background: linear-gradient(to right, #00f2fe 0%, #4facfe 100%);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 242, 254, 0.3);
}

.social-login {
margin-top: 30px;
text-align: center;
}

.social-login p {
margin-bottom: 15px;
font-size: 14px;
position: relative;
}

.social-login p::before,
.social-login p::after {
content: "";
position: absolute;
top: 50%;
width: 30%;
height: 1px;
background: rgba(255, 255, 255, 0.3);
}

.social-login p::before {
left: 0;
}

.social-login p::after {
right: 0;
}

.social-icons {
display: flex;
justify-content: center;
gap: 15px;
}

.social-icons a {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
color: white;
text-decoration: none;
transition: all 0.3s;
}

.social-icons a:hover {
background: #4facfe;
transform: translateY(-3px);
}

.footer {
position: absolute;
bottom: 20px;
width: 100%;
text-align: center;
font-size: 12px;
opacity: 0.7;
}

.footer a {
color: #4facfe;
text-decoration: none;
}

@media (max-width: 768px) {
.login-container {
width: 90%;
padding: 30px 20px;
}

#video-bg {
width: auto;
height: auto;
min-width: 100%;
min-height: 100%;
}
}
</style>
</head>
<body>

<video autoplay muted loop id="video-bg">
<source src="https://assets.mixkit.co/videos/preview/mixkit-waves-coming-to-the-beach-5016-large.mp4" type="video/mp4">
您的浏览器不支持HTML5视频
</video>


<div class="overlay"></div>


<div class="login-container">
<div class="logo">
<h1>欢迎登录</h1>
<p>请输入您的账号信息</p>
</div>

<form>
<div class="form-group">
<label for="username">用户名</label>
<input type="text" id="username" placeholder="请输入用户名">
</div>

<div class="form-group">
<label for="password">密码</label>
<input type="password" id="password" placeholder="请输入密码">
</div>

<div class="remember-forgot">
<label>
<input type="checkbox"> 记住我
</label>
<a href="#">忘记密码?</a>
</div>

<button type="submit" class="btn-login">登录</button>

<div class="social-login">
<p>或使用社交账号登录</p>
<div class="social-icons">
<a href="#"><i class="fab fa-weixin"></i></a>
<a href="#"><i class="fab fa-qq"></i></a>
<a href="#"><i class="fab fa-weibo"></i></a>
</div>
</div>
</form>
</div>


<div class="footer">

</div>


<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>

<script>
// 确保视频背景始终覆盖整个屏幕
function resizeVideo() {
const video = document.getElementById('video-bg');
const aspectRatio = video.videoWidth / video.videoHeight;
const windowRatio = window.innerWidth / window.innerHeight;

if (windowRatio > aspectRatio) {
video.style.width = '100%';
video.style.height = 'auto';
} else {
video.style.width = 'auto';
video.style.height = '100%';
}
}

// 视频加载后调整大小
document.getElementById('video-bg').addEventListener('loadedmetadata', function() {
resizeVideo();
});

// 窗口大小变化时调整视频
window.addEventListener('resize', resizeVideo);

// 表单提交
document.querySelector('form').addEventListener('submit', function(e) {
e.preventDefault();
alert('登录功能演示，实际功能需要后端支持');
});
</script>
</body>
</html>