【星空】好看的登录页面代码分享
好看的登录页面代码分享
UserLogin.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户登录界面</title>
<link rel="stylesheet" href="styleLogin.css"/>
</head>
<body>
<div class="container">
<div class="panel">
<div class="content">
<div class="switch">
<h1 id="login">登录</h1>
</div>
<form action="">
<div id="userName" class="input" aria-placeholder="用户名"><input type="text"></div>
<div id="password" class="input" aria-placeholder="密码"><input type="password"></div>
<p>
<a id="signUp" href="UserSignUp.html" class="input">跳转注册</a>
<span>|</span>
<a id="forget" href="UserRetrieve.html" class="input">忘记密码?</a>
</p>
<button class="button">登录</button>
</form>
</div>
</div>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.slim.js"></script>
<script>
$('.input input').on('focus',function () {
$(this).parent().addClass('focus');
})
$('.input input').on('blur',function () {
if($(this).val() === '')
$(this).parent().removeClass('focus');
})
</script>
</html>
styleLogin.css
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: url("星空.jpg") no-repeat;
}
.container {
position: relative;
width: 24rem;
}
.panel {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background: rgba(0,0,0,.8);
display: flex;
justify-content: center;
width: 400px;
padding: 40px;
box-sizing: border-box;
box-shadow: 0 15px 25px rgba(0,0,0,.5);
border-radius: 10px;
}
.switch h1 {
text-align: center;
font-size: 1.4rem;
color: rgba(125, 116, 255,.8);
border-bottom: rgba(125, 116, 255,.8) solid 2px;
cursor: default;
}
.input input {
outline: none;
width: 100%;
border: none;
background: none;
border-bottom: .1rem solid #7d74ff;
color: rgba(37, 215, 202, 0.84);
font-size: 1rem;
}
.input::after {
content: attr(aria-placeholder);
position: absolute;
left: 0;
top: -20%;
font-size: 1.1rem;
color: rgba(125, 116, 255, 0.44);
transition: .3s;
}
.input.focus::after {
top: -70%;
font-size: 1rem;
}
.input#forget {
color: #7d74ff;
font-size: 0.8rem;
text-decoration: none;
}
.input#forget:hover {
color: rgba(138, 143, 255, 0.4);
}
.input#signUp {
color: #7d74ff;
font-size: 0.8rem;
text-decoration: none;
}
.input#signUp:hover {
color: rgba(138, 143, 255, 0.4);
}
form p {
text-align: center;
}
form span {
color: #7d74ff;
font-size: 0.8rem;
cursor: default;
}
form {
width: 12rem;
margin: 1rem 0 0;
}
form .input {
position: relative;
opacity: 1;
width: 100%;
margin: 2rem 0 0;
height: 42px;
}
form .input#userName {
margin: 3rem 0 0;
}
form .input#password {
height: 1.6rem;
}
form button {
display: block;
border: none;
outline: none;
margin: 2rem 61px 0;
width: 56px;
height: 56px;
border-radius: 50%;
background: linear-gradient(90deg, #8a8fff, rgb(216, 174, 255));
box-shadow: 0 0 8px #8a8fff;
cursor: pointer;
}
form button:hover {
border: none;
outline: none;
margin: 2rem -7px 0;
width: 100%;
height: 3.5rem;
border-radius: 3rem;
background: linear-gradient(90deg, rgba(138, 143, 255, 0.75), rgba(216, 174, 255, 0.75));
box-shadow: 0 0 8px #8a8fff;
cursor: pointer;
color: rgba(0,0,0,0.6);
transition: .4s;
}
源码地址:
提取码:55uq
文章由官网发布,如若转载,请注明出处:https://www.veimoz.com/325
1 条评论
3.9k
嗯好看