前言
开这篇文章，主要目的有三：
1.每天保持新鲜感
2.自己做留存
3.他人作参考
具体内容
2021/12/03
关键词：
登录页面、玻璃态界面、背景颜色持续变化
参考来源：
效果图
完整代码
<body>
<section>
<div class="box">
<div class="form">
<h2>Login</h2>
<form>
<div class="inputBx">
<input type="text" placeholder="Username">
<img src="" alt="">
</div>
<div class="inputBx">
<input type="password" placeholder="Password">
<img src="" alt="">
</div>
<label class="remember">
<input type="checkbox">Remember Me
</label>
<div class="inputBx">
<input type="submit" value="Login">
</div>
</form>
<p>Forget <a href="#">Password</a></p>
<p>Need an <a href="#">Account</a></p>
</div>
</div>
</section>
</body>
<style>
/* 引入谷歌字体库 */
@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
/* 重置样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
section {
display: flex;
justify-content: center;
align-items: center;
min-height: 500px;
background: linear-gradient(-30deg, #03a9f4 0%, #3a78b7 50%, #262626 50%, #607d8b 100%);
animation: animate 10s linear infinite;
}
@keyframes animate {
0% {
filter: hue-rotate(0deg);
}
100% {
filter: hue-rotate(360deg);
}
}
.box {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 360px;
height: 480px;
padding: 50px;
border-radius: 6px;
box-shadow: 0 5px 35px rgba(0, 0, 0, 0.2);
background: rgba(255, 255, 255, 0.1);
}
.box::after {
content: '';
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border-radius: 5px;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 15%, transparent 50%, transparent 85%, rgba(255, 255, 255, 0.3) 100%);
pointer-events: none;
}
.box .form {
position: relative;
width: 100%;
}
.box .form h2 {
color: #fff;
font-weight: 600;
letter-spacing: 2px;
margin-bottom: 30px;
}
.box .form .inputBx {
position: relative;
width: 100%;
margin-bottom: 20px;
}
.box .form .inputBx input {
width: 100%;
outline: none;
border: 1px solid rgba(255, 255, 255, 0.2);
background: transparent;
padding: 8px 10px;
padding-left: 35px;
border-radius: 6px;
font-size: 16px;
font-weight: 300;
color: #fff;
box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.2);
}
.box .form .inputBx input::placeholder {
color: #Fff;
}
.box .form .inputBx input[type="submit"] {
background-color: #fff;
color: #000;
max-width: 100px;
padding: 8px 10px;
box-shadow: none;
font-weight: 500;
letter-spacing: 1px;
cursor: pointer;
}
.box .form .inputBx img {
position: absolute;
top: 8px;
left: 10px;
/* 水平方向缩放 */
transform: scale(0.7);
/* 滤镜反转颜色 */
filter: invert(1);
/* 没有图片以颜色占位*/
background-color: #bfa;
width: 15px;
height: 15px;
}
.remember {
position: relative;
display: inline-block;
color: #fff;
font-weight: 300;
margin-bottom: 10px;
cursor: pointer;
}
.box .form p {
color: #fff;
font-weight: 300;
font-size: 15px;
margin-top: 5px;
}
.box .form a {
color: #fff;
}
</style>
