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

<!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>
    
    <!-- Font Awesome 图标库 -->
    <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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值