效果图
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/5e0b0a0820e6366a4b957e635190f7e8.png)
代码
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins',sans-serif;
}
body{
overflow: hidden;
}
section{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(to bottom,
}
section .color{
position: absolute;
filter: blur(150px);
}
section .color:nth-child(1){
top: -350px;
width: 600px;
height: 600px;
background:
}
section .color:nth-child(2){
bottom: -150px;
left: 100px;
width: 500px;
height: 500px;
background:
}
section .color:nth-child(3){
bottom: 50px;
right: 100px;
width: 500px;
height: 500px;
background:
}
.box{
position: relative;
}
.box .square{
position: absolute;
backdrop-filter: blur(5px);
box-shadow: 0 25px 45px rgb(0,0,0,0.1);
border: 1px solid rgb(255,255,255,0.5);
border-right: 1px solid rgb(255,255,255,0.2);
border-bottom: 1px solid rgb(255,255,255,0.2);
background:rgb(255,255,255,0.1);
border-radius: 10px;
animation: animate 10s linear infinite;
animation-delay: calc(-1s*var(--i));
}
/* 动画 */
@keyframes animate{
0%,100%{
transform: translateY(-40px);
}
50%{
transform: translate(40px);
}
}
.box .square:nth-child(1){
top: -50px;
right: -60px;
width: 100px;
height: 100px;
}
.box .square:nth-child(2){
top: 150px;
left: -100px;
width: 120px;
height: 120px;
z-index: 2;
}
.box .square:nth-child(3){
bottom: 50px;
right: -60px;
width: 80px;
height: 80px;
z-index: 2;
}
.box .square:nth-child(4){
bottom: -80px;
left: 100px;
width: 50px;
height: 50px;
}
.box .square:nth-child(5){
top: -90px;
left: 140px;
width: 60px;
height: 60px;
}
.container{
position: relative;
width:400px;
min-height: 400px;
background:rgb(255,255,255,0.1);
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
backdrop-filter: blur(5px);
box-shadow: 0 25px 45px rgb(0,0,0,0.1);
border: 1px solid rgb(255,255,255,0.5);
border-right: 1px solid rgb(255,255,255,0.2);
border-bottom: 1px solid rgb(255,255,255,0.2);
}
.form{
position: relative;
height: 100%;
width: 100%;
padding: 40px;
}
.form h2{
position: relative;
color:
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:
}
.form .inputBox{
width: 100%;
margin-top: 20px;
}
.form .inputBox input{
width: 100%;
background: rgb(255,255,255,0.2);
border: none;
outline: none;
padding: 10px 20px;
border-radius: 35px;
border: 1px solid rgb(255,255,255,0.5);
border-right: 1px solid rgb(255,255,255,0.2);
border-bottom: 1px solid rgb(255,255,255,0.2);
font-size: 16px;
letter-spacing: 1px;
color:
box-shadow: 0 5px 15px rgb(0,0,0,0.05);
}
.form .inputBox input::placeholder{
color:
}
.form .inputBox input[type="submit"]{
background:
color:
max-width: 100px;
cursor: pointer;
margin-bottom: 20px;
font-weight: 600;
}
.forget{
margin-top: 5px;
color:
}
.forget a{
color:
font-weight: 600;
}
</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>
</form>
</div>
</div>
</div>
</section>
</body>
</html>