写一个动态炫酷的星空的登录页单html文件
时间: 2023-12-29 12:04:11 浏览: 28
好的,我可以为您提供一些相关的 HTML 代码。下面是一个简单的星空登录页效果:
```
<!DOCTYPE html>
<html>
<head>
<title>星空登录页</title>
<style>
body {
background-color: #000;
overflow: hidden;
}
#stars {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
.twinkling {
position: absolute;
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/star.png');
background-repeat: no-repeat;
width: 3px;
height: 3px;
animation: twinkling 10s infinite;
}
@keyframes twinkling {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#login {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
color: #FFF;
font-size: 24px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<div id="stars">
<div class="twinkling" style="top: 20%; left: 25%;"></div>
<div class="twinkling" style="top: 30%; left: 80%;"></div>
<div class="twinkling" style="top: 50%; left: 45%;"></div>
<div class="twinkling" style="top: 80%; left: 75%;"></div>
<div class="twinkling" style="top: 90%; left: 10%;"></div>
</div>
<div id="login">
<h1>欢迎登录</h1>
<form>
<input type="text" placeholder="用户名">
<input type="password" placeholder="密码">
<br>
<button type="submit">登录</button>
</form>
</div>
</body>
</html>
```
请注意,这只是一个简单的例子,并不是非常复杂或高级的星空登录页。您可以根据需要进行修改和优化,如更改星星的数量或位置,添加动画效果等等。希望这可以帮助您开始创建您的星空登录页。