酷炫登录页面_layui 酷炫登录界面模板-CSDN博客

本文链接：https://blog.csdn.net/wanghao312/article/details/147430713

以下是一个结合了动态背景、粒子效果和动画的酷炫登录页面，使用HTML5+CSS3+JavaScript实现：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>赛博空间入口</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            min-height: 100vh;
            background: #0a0a0a;
            overflow: hidden;
            font-family: 'Arial', sans-serif;
        }

        .cyber-container {
            position: relative;
            z-index: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: radial-gradient(circle at center, 
                rgba(0, 255, 255, 0.1),
                rgba(0, 0, 0, 0.8));
        }

        .cyber-card {
            position: relative;
            width: 380px;
            padding: 40px;
            background: rgba(0, 0, 0, 0.8);
            border: 2px solid #0ff;
            border-radius: 10px;
            box-shadow: 0 0 30px #0ff;
            transform-style: preserve-3d;
            transition: 0.5s;
        }

        .cyber-card:hover {
            transform: rotateX(5deg) rotateY(5deg) translateZ(20px);
        }

        .glowing-text {
            text-align: center;
            color: #0ff;
            font-size: 2.5em;
            text-shadow: 0 0 10px #0ff;
            margin-bottom: 30px;
        }

        .input-box {
            position: relative;
            margin-bottom: 30px;
        }

        .input-box input {
            width: 100%;
            padding: 15px;
            background: transparent;
            border: 2px solid #0ff;
            border-radius: 5px;
            color: #fff;
            font-size: 1.1em;
            transition: 0.3s;
        }

        .input-box input:focus {
            box-shadow: 0 0 15px #0ff;
            outline: none;
        }

        .cyber-button {
            width: 100%;
            padding: 15px;
            background: linear-gradient(45deg, #0ff, #00f);
            border: none;
            border-radius: 5px;
            color: #fff;
            font-size: 1.2em;
            cursor: pointer;
            transition: 0.3s;
            text-transform: uppercase;
        }

        .cyber-button:hover {
            letter-spacing: 2px;
            box-shadow: 0 0 20px #0ff;
        }

        #particles {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }

        .matrix-code {
            position: fixed;
            color: #0f0;
            font-family: 'Courier New', monospace;
            opacity: 0.3;
            pointer-events: none;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-20px); }
        }

        .floating-cube {
            position: absolute;
            width: 50px;
            height: 50px;
            background: rgba(0, 255, 255, 0.2);
            animation: float 3s ease-in-out infinite;
            box-shadow: 0 0 20px #0ff;
        }
    </style>
</head>
<body>
    <canvas id="particles"></canvas>
    <div class="cyber-container">
        <div class="floating-cube" style="top:20%; left:15%"></div>
        <div class="floating-cube" style="top:70%; right:20%"></div>
        
        <div class="cyber-card">
            <h2 class="glowing-text">CYBER ACCESS</h2>
            <form>
                <div class="input-box">
                    <input type="text" placeholder="用户识别码" required>
                </div>
                <div class="input-box">
                    <input type="password" placeholder="验证密钥" required>
                </div>
                <button type="submit" class="cyber-button">系统接入</button>
            </form>
        </div>
    </div>

    <script>
        // 粒子系统
        const canvas = document.getElementById('particles');
        const ctx = canvas.getContext('2d');
        let particles = [];

        class Particle {
            constructor() {
                this.x = Math.random() * canvas.width;
                this.y = Math.random() * canvas.height;
                this.size = Math.random() * 2 + 1;
                this.speedX = Math.random() * 3 - 1.5;
                this.speedY = Math.random() * 3 - 1.5;
            }

            update() {
                this.x += this.speedX;
                this.y += this.speedY;

                if (this.x > canvas.width) this.x = 0;
                if (this.x < 0) this.x = canvas.width;
                if (this.y > canvas.height) this.y = 0;
                if (this.y < 0) this.y = canvas.height;
            }

            draw() {
                ctx.fillStyle = '#0ff';
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
                ctx.fill();
            }
        }

        function init() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            
            particles = [];
            for (let i = 0; i < 100; i++) {
                particles.push(new Particle());
            }
        }

        function animate() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            particles.forEach(particle => {
                particle.update();
                particle.draw();
            });
            
            requestAnimationFrame(animate);
        }

        // 窗口大小变化时重置画布
        window.addEventListener('resize', init);
        
        // 初始化并运行动画
        init();
        animate();

        // 动态生成矩阵代码雨
        function createMatrixCode() {
            const code = document.createElement('div');
            code.className = 'matrix-code';
            code.style.left = Math.random() * 100 + '%';
            code.style.animation = `fall ${Math.random() * 5 + 3}s linear infinite`;
            code.textContent = String.fromCharCode(0x30A0 + Math.random() * 96);
            document.body.appendChild(code);
            
            setTimeout(() => code.remove(), 5000);
        }

        setInterval(createMatrixCode, 100);
    </script>
</body>
</html>