![](https://i-blog.csdnimg.cn/blog_migrate/85a934e87c1a41270809916523a9db02.gif)
非常实用的炫彩登入界面
话不多说!直接上代码!!记得点赞、收藏和关注!!!
代码如下↓👇
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 黑体;
}
body{
overflow: hidden;
}
section{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(
to bottom,#f1f4f9,#dff1ff
);
}
section .color{
position: absolute;
}
section .color:nth-child(1){
top: -350px;
width: 800px;
height: 800px;
background: #ff359b;
}
section .color:nth-child(2){
bottom: -150px;
left: 100px;
height: 700px;
width: 700px;
background: #fffd87;
}
section .color:nth-child(3){
bottom: 50px;
right: 100px;
height: 600px;
width: 600px;
background: #00dfff;
}
section .color{
filter: blur(400px);
}
.container{
position: relative;
width: 400px;
min-height: 400px;
background: rgba(255, 255, 255, .1);
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
backdrop-filter: blur(5px);
box-shadow: 0 25px 45px rgba(0, 0, 0, .1);
border: 1px solid rgba(255, 255, 255, .5);
border-right: 1px solid rgba(255, 255, 255, .2);
border-bottom: 1px solid rgba(255, 255, 255, .2);
}
.form{
position: relative;
width: 100%;
height: 100%;
padding: 40px;
}
.form h2 {
position: relative;
color: #fff;
font-size: 24px;
font-weight:600;
letter-spacing: 1px;
margin-bottom: 40px;
}
.form h2::before{
content: "";
position: absolute;
left: 0;
bottom: -10px;
width: 80px;
height: 4px;
background: #fff;
}
.form .inputbox{
width: 100%;
margin-top: 20px;
}
.form .inputbox input{
width: 100%;
background: rgba(255, 255, 255, .2);
border: none;
outline: none;
padding: 10px 20px;
border-radius: 35px;
box-shadow: 0 25px 45px rgba(0, 0, 0, .5);
border-right: 1px solid rgba(255, 255, 255, .2);
border-bottom: 1px solid rgba(255, 255, 255, .2);
letter-spacing: 1px;
color: #fff;
box-shadow: 0 5px 15px rgba(0, 0, 0, .05);
}
.form .inputbox input::placeholder{
color: #fff;
}
.form .inputbox input[type="submit"]{
background: #fff;
color: #666;
max-width: 100px;
cursor: pointer;
margin-bottom: 20px;
font-weight: 600;
}
.forget{
margin-top: 5px;
color: #fff;
}
.forget a {
color:#fff;
font-weight: 600;
}
.box{
position: relative;
}
.box .square{
position: absolute;
width: 100px;
height: 100px;
background: rgba(255, 255, 255, .1);
backdrop-filter: blur(5px);
box-shadow: 0 25px 25px rgba(0, 0, 0, .1);
border: 1px solid rgba(255, 255, 255, .5);
border-right: 1px solid rgba(255, 255, 255, .2);
border-bottom: 1px solid rgba(255, 255, 255, .2);
border-radius: 10px;
}
.box .square:nth-child(1){
top: -50px;
right:-60px;
width: 100px;
height: 100px;
} .box .square:nth-child(2){
top: 20px;
right:450px;
width: 100px;
height: 100px;
} .box .square:nth-child(3){
top: 50px;
right:200px;
width: 100px;
height: 100px;
} .box .square:nth-child(4){
top: 350px;
left:-60px;
width: 100px;
height: 100px;
}
.box .square:nth-child(5){
top: 350px;
right:-80px;
width: 100px;
height: 100px;
}
.box .square{
animation: animate 10s linear infinite;
animation-delay: calc(-1s*var(--i));
}
@keyframes animate{
0%,100%{
transform: translateY(-40px);
}
50%{
transform: translateX(40px);
}
}
</style>
</head>
<body>
<section>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="box">
<div class="square" style="--i:0"></div>
<div class="square" style="--i:1"></div>
<div class="square" style="--i:2"></div>
<div class="square" style="--i:3"></div>
<div class="square" style="--i:4"></div>
<div class="container">
<div class="form">
<h2>欢迎</h2>
<form>
<div class="inputbox">
<input type="text" placeholder="用户名">
</div>
<div class="inputbox">
<input type="password" placeholder="密码">
</div>
<div class="inputbox">
<input type="submit" value="登录">
</div>
<p class="forget">
忘记密码?
<a href="#">找回</a>
</p>
<p class="forget">
没有账号?
<a href="#">注册</a>
</p>
</form>
</div>
</div>
</div>
</section>
</body>
</html>