169 lines
3.2 KiB
CSS
169 lines
3.2 KiB
CSS
|
*{
|
||
|
|
margin:0;
|
||
|
|
padding:0;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
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: fixed;
|
||
|
|
filter: blur(150px);
|
||
|
|
}
|
||
|
|
section .color:nth-child(1){
|
||
|
|
top: -300px;
|
||
|
|
width: 355px;
|
||
|
|
height: 600px;
|
||
|
|
background: #ff359b;
|
||
|
|
}
|
||
|
|
section .color:nth-child(2){
|
||
|
|
bottom: -100px;
|
||
|
|
left: 100px;
|
||
|
|
width: 265px;
|
||
|
|
height: 450px;
|
||
|
|
background: #fffd87;
|
||
|
|
}
|
||
|
|
section .color:nth-child(3){
|
||
|
|
bottom: 40px;
|
||
|
|
right: 250px;
|
||
|
|
width: 300px;
|
||
|
|
height: 300px;
|
||
|
|
background: #00d2ff;
|
||
|
|
}
|
||
|
|
.box{
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
.box .square{
|
||
|
|
position: absolute;
|
||
|
|
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);
|
||
|
|
background: rgba(255,255,255, .1);
|
||
|
|
border-radius: 10px;
|
||
|
|
animation: animate 6s linear infinite;
|
||
|
|
animation-delay: calc(-1s * var(--i));
|
||
|
|
}
|
||
|
|
@keyframes animate{
|
||
|
|
0%, 100%{
|
||
|
|
transform: translateY(-40px);
|
||
|
|
}
|
||
|
|
50%{
|
||
|
|
transform: translateY(40px);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.box .square:nth-child(1){
|
||
|
|
top: -50px;
|
||
|
|
right: -30px;
|
||
|
|
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: -15px;
|
||
|
|
width: 70px;
|
||
|
|
height: 70px;
|
||
|
|
z-index: 2;
|
||
|
|
}
|
||
|
|
.box .square:nth-child(4){
|
||
|
|
bottom: -80px;
|
||
|
|
left: 100px;
|
||
|
|
width: 50px;
|
||
|
|
height: 50px;
|
||
|
|
}
|
||
|
|
.box .square:nth-child(5){
|
||
|
|
top: -80px;
|
||
|
|
left: 100px;
|
||
|
|
width: 60px;
|
||
|
|
height: 60px;
|
||
|
|
}
|
||
|
|
.container{
|
||
|
|
position: relative;
|
||
|
|
width: 350px;
|
||
|
|
min-height: 400px;
|
||
|
|
background: rgba(255,255,255, .1);
|
||
|
|
display: flex;
|
||
|
|
justify-content:center;
|
||
|
|
align-items: center;
|
||
|
|
backdrop-filter: blur(25px);
|
||
|
|
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);
|
||
|
|
border-radius: 10px;
|
||
|
|
}
|
||
|
|
.form{
|
||
|
|
position: relative;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
padding: 40px;
|
||
|
|
}
|
||
|
|
.form h2{
|
||
|
|
position: relative;
|
||
|
|
color: #fff;
|
||
|
|
font-size: 24px;
|
||
|
|
font-weight: 600;
|
||
|
|
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;
|
||
|
|
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);
|
||
|
|
box-shadow: 0 15px 15px rgba(0,0,0, .1);
|
||
|
|
font-size: 16px;
|
||
|
|
letter-spacing: 1px;
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
.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: 400;
|
||
|
|
}
|
||
|
|
.forget {
|
||
|
|
margin-top: 5px;
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
.forget a{
|
||
|
|
color: #fff;
|
||
|
|
font-weight: 600;
|
||
|
|
}
|