上班偷偷摸鱼做了个登录页面👀✨✨✨
🪐 效果如下:
一、html部分:
<div class="login">
<div class="login-box">
<div class="login_title">
<span>管理员登录</span>
</div>
<div class="login_fields">
<div class="login_fields__user">
<el-icon color="white">
<User />
</el-icon>
<input class="name-input" name="login" placeholder="用户名" maxlength="16" type="text" autocomplete="off" />
</div>
<div class="login_fields__password">
<el-icon color="white">
<Lock />
</el-icon>
<input name="pwd" placeholder="密码" maxlength="16" type="text" autocomplete="off" />
</div>
<div class="login_fields__key">
<el-icon color="white">
<Key />
</el-icon>
<input name="code" placeholder="验证码" maxlength="4" type="text" autocomplete="off" />
<div class="validation" style="opacity: 1; right: -5px; top: -3px">
获取验证码
</div>
</div>
<div class="login_fields__submit">
<input type="button" value="登录" />
</div>
<div class="disclaimer">
<p>欢迎登陆后台管理系统</p>
</div>
</div>
</div>
</div>
二、css部分:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
height: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
}
.login {
background: url('https://img-blog.csdnimg.cn/aff605fb499846f5911bec368762e829.png');
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
position: fixed;
}
.login-box {
width: 400px;
height: 400px;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
display: flex;
justify-content: center;
flex-direction: column;
gap: 10px;
border-radius: 0.5em;
/**模糊的背景 */
backdrop-filter: blur(5px);
box-shadow: 0 15px 25px rgba(0, 0, 0, 0.4);
}
span {
color: #ffffff;
display: grid;
place-items: center;
margin: 20px 0;
}
.login_fields>div {
display: flex;
justify-content: start;
align-items: center;
margin: 20px 80px;
}
.login_fields .disclaimer,
.login_fields .login_fields__submit {
display: flex;
justify-content: center;
align-items: center;
margin: 20px 80px;
}
input {
width: 190px;
padding: 10px 10px;
outline: 0;
border: none;
background: 0 0;
color: #fff;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
input[type='text']:hover,
input[type='password']:hover {
border-color: rgb(129, 201, 235);
}
input[type='button']:hover {
border-color: rgb(129, 201, 235);
color: rgb(129, 201, 235);
}
input[type='button']:active {
background: rgb(45, 126, 163);
color: rgb(129, 201, 235);
}
input::placeholder {
color: rgb(165, 165, 165);
}
.login_fields__key input {
width: 80px;
}
.validation {
color: rgb(129, 201, 235);
}
.login_fields__submit input {
width: 120px;
border: 1px solid#fff;
border-radius: 20px;
background: rgba(255, 255, 255, 0);
color: #fff;
}
.disclaimer {
color: #fff;
}
三、完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录界面</title>
</head>
<body>
<div class="login">
<div class="login-box">
<div class="login_title">
<span>管理员登录</span>
</div>
<div class="login_fields">
<div class="login_fields__user">
<el-icon color="white">
<User />
</el-icon>
<input class="name-input" name="login" placeholder="用户名" maxlength="16" type="text" autocomplete="off" />
</div>
<div class="login_fields__password">
<el-icon color="white">
<Lock />
</el-icon>
<input name="pwd" placeholder="密码" maxlength="16" type="text" autocomplete="off" />
</div>
<div class="login_fields__key">
<el-icon color="white">
<Key />
</el-icon>
<input name="code" placeholder="验证码" maxlength="4" type="text" autocomplete="off" />
<div class="validation" style="opacity: 1; right: -5px; top: -3px">
获取验证码
</div>
</div>
<div class="login_fields__submit">
<input type="button" value="登录" />
</div>
<div class="disclaimer">
<p>欢迎登陆后台管理系统</p>
</div>
</div>
</div>
</div>
</body>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
height: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
}
.login {
background: url('https://img-blog.csdnimg.cn/aff605fb499846f5911bec368762e829.png');
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
position: fixed;
}
.login-box {
width: 400px;
height: 400px;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
display: flex;
justify-content: center;
flex-direction: column;
gap: 10px;
border-radius: 0.5em;
/**模糊的背景 */
backdrop-filter: blur(5px);
box-shadow: 0 15px 25px rgba(0, 0, 0, 0.4);
}
span {
color: #ffffff;
display: grid;
place-items: center;
margin: 20px 0;
}
.login_fields>div {
display: flex;
justify-content: start;
align-items: center;
margin: 20px 80px;
}
.login_fields .disclaimer,
.login_fields .login_fields__submit {
display: flex;
justify-content: center;
align-items: center;
margin: 20px 80px;
}
input {
width: 190px;
padding: 10px 10px;
outline: 0;
border: none;
background: 0 0;
color: #fff;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
input[type='text']:hover,
input[type='password']:hover {
border-color: rgb(129, 201, 235);
}
input[type='button']:hover {
border-color: rgb(129, 201, 235);
color: rgb(129, 201, 235);
}
input[type='button']:active {
background: rgb(45, 126, 163);
color: rgb(129, 201, 235);
}
input::placeholder {
color: rgb(165, 165, 165);
}
.login_fields__key input {
width: 80px;
}
.validation {
color: rgb(129, 201, 235);
}
.login_fields__submit input {
width: 120px;
border: 1px solid#fff;
border-radius: 20px;
background: rgba(255, 255, 255, 0);
color: #fff;
}
.disclaimer {
color: #fff;
}
</style>
</html>
提示:如果没有显示图标自己加哦,我是使用了element-plus的图标库