【经典】星空主题的注册界面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>