首页星空背景登录页面代码

星空背景登录页面代码

时间: 2024-09-19 10:06:16 浏览: 52

创建星空背景的登录页面代码通常涉及到HTML、CSS和JavaScript。下面是一个简单的示例，使用CSS3的线性渐变和伪元素实现星空效果： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <style> body { margin: 0; padding: 0; background-image: linear-gradient(transparent, rgba(0, 0, 0, .5)), url("starry-background.jpg"); /* 使用星空图片 */ background-size: cover; background-position: center; display: flex; justify-content: center; align-items: center; height: 100vh; /* 设置视口高度 */ font-family: Arial, sans-serif; color: white; } .login-container { width: 400px; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, .3); text-align: center; } input[type="text"], input[type="password"] { padding: 10px; margin-bottom: 10px; border: none; outline: none; border-radius: 3px; background-color: rgba(255, 255, 255, .1); } button { padding: 10px 20px; border: none; cursor: pointer; background-color: #ff6b6b; color: white; border-radius: 3px; transition: background-color 0.3s ease; } button:hover { background-color: #cc5555; } </style> </head> <body> <div class="login-container"> <h2>星空登录</h2> <input type="text" placeholder="用户名"> <input type="password" placeholder="密码"> <button onclick="login()">登录</button> </div> <script> function login() { // 这里可以添加登录逻辑，例如跳转到验证页面等 alert('正在登录...'); } </script> </body> </html> ``` 这个例子中，HTML负责布局，CSS设置背景和样式，JavaScript提供了一些基本交互。注意，实际项目中你需要替换`starry-background.jpg`为你下载的真实星空图片文件。

阅读全文