写一个炫酷的登录页面样式
时间: 2024-06-08 22:06:56 浏览: 9
好的,这里提供一个简单的登录页面样式,你可以根据需求进行修改和美化:
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="login-box">
<h2>Login</h2>
<form>
<div class="user-box">
<input type="text" name="" required="">
<label>Username</label>
</div>
<div class="user-box">
<input type="password" name="" required="">
<label>Password</label>
</div>
<a href="#">
<span></span>
<span></span>
<span></span>
<span></span>
Submit
</a>
</form>
</div>
</body>
</html>
```
CSS代码:
```
body {
margin: 0;
padding: 0;
background: #222;
font-family: sans-serif;
}
.login-box {
width: 280px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
}
.login-box h2 {
text-align: center;
text-transform: uppercase;
letter-spacing: 4px;
}
.login-box form {
color: #fff;
}
.login-box input[type="text"], .login-box input[type="password"] {
border: none;
border-bottom: 1px solid #fff;
background: transparent;
outline: none;
height: 40px;
color: #fff;
font-size: 16px;
}
.login-box input[type="submit"] {
border: none;
outline: none;
height: 40px;
background: #fb2525;
color: #fff;
font-size: 18px;
border-radius: 20px;
}
.login-box input[type="submit"]:hover {
cursor: pointer;
background: #ffc107;
color: #000;
}
.login-box a {
text-decoration: none;
font-size: 14px;
line-height: 20px;
color: darkgrey;
display: block;
margin-top: 20px;
}
.login-box a:hover {
color: #ffc107;
}
.login-box span {
position: absolute;
display: block;
background: #ffc107;
height: 60px;
width: 60px;
border-radius: 50%;
animation: animate 2s linear infinite;
}
.login-box span:nth-child(1) {
top: 0;
left: 0;
animation-delay: 0s;
}
.login-box span:nth-child(2) {
top: 0;
right: 0;
animation-delay: -1.5s;
}
.login-box span:nth-child(3) {
bottom: 0;
right: 0;
animation-delay: -1s;
}
.login-box span:nth-child(4) {
bottom: 0;
left: 0;
animation-delay: -0.5s;
}
@keyframes animate {
0% {
transform: scale(0);
opacity: 1;
}
100% {
transform: scale(1.2);
opacity: 0;
}
}
```
效果图如下:
![login_page](https://user-images.githubusercontent.com/5803226/136143157-5c4bda0c-5769-4d92-b5a8-1c8f4c8ba23d.png)