目录
这是一个简单的星空主题的注册界面，使用了 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>
说明：
- 背景：使用了一个静态的星空图片作为背景，可以替换成自己喜欢的星空图。
- 星星动画：通过在页面中动态生成多个小星星，并使用 CSS 动画来模拟它们闪烁的效果。
- 注册框：一个简单的半透明黑色注册框，包含用户名、密码和确认密码输入框，提交按钮颜色与星空主题协调。
- CSS 动画：星星通过
@keyframes实现闪烁的效果。
嗨，我是命运之光。如果你觉得我的分享有价值，不妨通过以下方式表达你的支持：👍 点赞来表达你的喜爱，📁 关注以获取我的最新消息，💬 评论与我交流你的见解。我会继续努力，为你带来更多精彩和实用的内容。
点击这里👉 ，获取最新动态，⚡️ 让信息传递更加迅速。
