帮我写一个炫酷的前端登录页面,一定要带有动画和科技的感觉
时间: 2024-02-05 18:14:24 浏览: 18
好的,以下是一个简单的登录页面示例,带有动画和科技感:
```html
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
<style>
body {
background-color: #111;
font-family: "Helvetica Neue", sans-serif;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
#login-box {
background-color: #333;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
animation: fade-in 1s ease-out;
}
h1 {
font-size: 48px;
margin-top: 0;
text-align: center;
animation: slide-down 1s ease-out;
}
input[type="text"], input[type="password"] {
background-color: #444;
border: none;
border-radius: 5px;
padding: 10px;
color: #fff;
margin-bottom: 10px;
width: 100%;
font-size: 18px;
}
input[type="submit"] {
background-color: #00c5ff;
border: none;
border-radius: 5px;
padding: 10px;
color: #fff;
font-size: 18px;
cursor: pointer;
transition: background-color 0.3s ease-out;
}
input[type="submit"]:hover {
background-color: #00a3cc;
}
@keyframes fade-in {
from {
opacity: 0;
transform: translateY(-50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slide-down {
from {
transform: translateY(-50px);
}
to {
transform: translateY(0);
}
}
</style>
</head>
<body>
<div id="login-box">
<h1>Login</h1>
<input type="text" placeholder="Username">
<input type="password" placeholder="Password">
<input type="submit" value="Login">
</div>
</body>
</html>
```
这个页面采用黑色背景和白色文本配色,带有一个中央的登录框,带有淡入淡出和滑动动画效果。登录框中包括用户名和密码输入框以及登录按钮。
你可以根据自己的需求进行修改和定制,比如更改配色方案、调整动画效果等等。