【经典】星空主题的注册界面HTML,CSS,JS

界面展示

完整代码

说明：

这是一个简单的星空主题的注册界面，使用了 HTML 和 CSS 来实现一个背景为星空效果的注册页面。

界面展示

完整代码

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>星空主题注册界面</title>
    <style>
        /* 星空背景效果 */
        body {
            margin: 0;
            padding: 0;
            height: 100vh;
            background: #1a1a2e; /* 深色背景 */
            color: white;
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            position: relative;
        }

        /* 星星动画效果 */
        .stars {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('https://cdn.pixabay.com/photo/2017/08/30/02/18/starry-night-2695563_960_720.jpg') no-repeat center center fixed;
            background-size: cover;
            z-index: -1;
        }

        /* 注册框样式 */
        .register-box {
            background: rgba(0, 0, 0, 0.6); /* 半透明背景 */
            padding: 40px;
            border-radius: 10px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
            width: 300px;
            text-align: center;
        }

        .register-box h2 {
            margin-bottom: 20px;
            font-size: 28px;
            font-weight: bold;
        }

        .input-field {
            margin-bottom: 20px;
            width: 100%;
            padding: 10px;
            background: #333;
            border: none;
            border-radius: 5px;
            color: white;
            font-size: 16px;
        }

        .input-field:focus {
            outline: none;
            background-color: #555;
        }

        .submit-btn {
            background: #ff6347; /* 番茄色 */
            border: none;
            padding: 15px;
            width: 100%;
            font-size: 18px;
            border-radius: 5px;
            cursor: pointer;
            color: white;
        }

        .submit-btn:hover {
            background-color: #ff4500; /* 番茄色变亮 */
        }

        /* 小星星动画 */
        .star {
            position: absolute;
            border-radius: 50%;
            width: 2px;
            height: 2px;
            background-color: white;
            animation: twinkle 1.5s infinite alternate;
        }

        @keyframes twinkle {
            0% {
                opacity: 0.8;
                transform: scale(1);
            }
            100% {
                opacity: 0.2;
                transform: scale(1.5);
            }
        }
    </style>
</head>
<body>
    <div class="stars"></div>
    <div class="register-box">
        <h2>注册账号</h2>
        <form action="#" method="POST">
            <input type="text" class="input-field" placeholder="用户名" required>
            <input type="password" class="input-field" placeholder="密码" required>
            <input type="password" class="input-field" placeholder="确认密码" required>
            <button type="submit" class="submit-btn">注册</button>
        </form>
    </div>

    <script>
        // 创建小星星动画
        function createStars() {
            const numStars = 200;
            for (let i = 0; i < numStars; i++) {
                let star = document.createElement("div");
                star.classList.add("star");
                const x = Math.random() * 100;
                const y = Math.random() * 100;
                const duration = Math.random() * 2 + 1;
                const delay = Math.random() * 5;
                star.style.top = `${y}vh`;
                star.style.left = `${x}vw`;
                star.style.animationDuration = `${duration}s`;
                star.style.animationDelay = `${delay}s`;
                document.body.appendChild(star);
            }
        }

        createStars();
    </script>
</body>
</html>