@keyframes form {
0% {
transform: perspective(400px) rotateX(-10deg)
}
75% {
transform: perspective(400px) rotateX(1deg)
}
100% {
transform: perspective(400px) rotateX(0deg)
}
}
.form-auth {
position: relative;
width: 360px;
margin: 0 auto;
padding: 80px 40px 40px;
background: rgba(255, 255, 255, 0.8);
box-shadow: 0.4px 6px 65px rgba(0, 0, 0, 0.22);
box-sizing: border-box;
transform-origin: 50% 0;
animation: form .6s ease-in-out;
}
.form-auth__title {
margin: 0;
font-size: 30px;
line-height: 1.1;
text-align: center;
}
.form-auth__descr {
margin-bottom: 30px;
font-size: 18px;
color: rgba(0, 0, 0, 0.5);
text-align: center;
}
.form-auth__input-field {
box-sizing: inherit;
display: block;
width: 100%;
height: 40px;
margin-bottom: 20px;
padding: 0 10px;
font-size: 18px;
font-weight: 300;
background: #ffffff;
border: 1px solid #636363;
}
.form-auth__input-field:focus {
border: 2px solid #3e9ffd;
}
.form-auth__input-field--bottom {
margin-bottom: 22.5px;
}
.form-auth__sign-in {
box-sizing: border-box;
width: 100%;
padding: 6px 0;
font-size: 18px;
background-color: #3e9ffd;
border: none;
color: #fff;
outline: none;
text-align: center;
}
.custom-control {
position: relative;
display: block;
margin-bottom: 22.5px;
}
.custom-control__input {
box-sizing: border-box;
position: absolute;
padding: 0;
opacity: 0;
pointer-events: none;
}
.custom-control__input:checked~.custom-control__label::before {
background-color: #007bff;
border-color: #007bff;
color: #fff;
}
.custom-control__input:checked~.custom-control__label::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
}
.custom-control__label {
position: relative;
display: inline-block;
margin-bottom: 0;
padding-left: 30px;
font-size: 16px;
color: #636363;
vertical-align: top;
}
.custom-control__label::before {
content: '';
position: absolute;
display: block;
top: 50%;
left: 0;
width: 18px;
height: 18px;
background: #ffffff;
border: 1px solid #adb5bd;
border-radius: 5px;
pointer-events: none;
transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
transform: translateY(-50%);
}
.custom-control__label::after {
content: '';
position: absolute;
display: block;
top: 50%;
left: 0;
width: 18px;
height: 18px;
background: no-repeat 50%/50% 50%;
transform: translateY(-50%);
}
.logo {
position: absolute;
top: -50px;
left: 50%;
width: 100px;
height: 100px;
background: #fff;
border-radius: 15px;
box-shadow: 0.4px 6px 24px rgba(0, 0, 0, 0.07);
transform: translateX(-50%);
}
.logo__block {
position: absolute;
width: 27.5px;
height: 27.5px;
border-radius: 5px;
}
.logo__block--orange {
left: 28.5px;
top: 15px;
background: rgba(248, 145, 29, 0.8);
}
.logo__block--pink {
right: 30px;
top: 26px;
background: rgba(209, 54, 156, 0.8);
}
.logo__block--blue {
left: 28.5px;
top: 42.5px;
background: rgba(62, 159, 253, 0.8);
}
.logo__block--green {
right: 30px;
top: 53.5px;
background: rgba(78, 191, 73, 0.8);
}
<div class="content">
<form action="" class="form-auth">
<div class="logo">
<div class="logo__block logo__block--orange"></div>
<div class="logo__block logo__block--pink"></div>
<div class="logo__block logo__block--blue"></div>
<div class="logo__block logo__block--green"></div>
</div>
<h2 class="form-auth__title">QCRM</h2>
<p class="form-auth__descr">by SupportYourApp</p>
<input type="text" name="login" placeholder="Login" required autocomplete="off" class="form-auth__input-field">
<input type="password" name="password" placeholder="Password" autocomplete="off" required class="form-auth__input-field form-auth__input-field--bottom">
<div class="custom-control">
<input type="checkbox" class="custom-control__input" id="chk">
<label class="custom-control__label" for="chk">Remember me on this computer</label>
</div>
<button class="form-auth__sign-in" type="submit">Sign In to QCRM</button>
</form>
</div>
Подскажите, как реализовать такую анимацию как на видео. Анимацию основного блока сделал, а с мелкими проблемы. https://youtu.be/dpxCtJczrYY