CSS Liquid animation Login form | HTML, CSS & JavaScript

<div class=liquid-bg>
        <div class=blob></div>
        <div class=blob></div>
        <div class=blob></div>
    </div>
    <div class=login-box>
        <div class=form-content id=formContent>
            <div class=logo>
                L
            </div>
            <h2>
                Welcome Back
            </h2>
            <p class=subtitle>
                Login to continue your journey
            </p>
            <form id=loginForm>
                <div class=input-box>
                    <input type=email id=email required>
                    <label>
                        Email Address
                    </label>
                </div>
                <div class=input-box>
                    <input type=password id=password required>
                    <label>
                        Password
                    </label>
                </div>
                <div class=options>
                    <label>
                        <input type=checkbox>
                        Remember me
                    </label>
                    <a href=#>
                        Forgot Password?
                    </a>
                </div>
                <button class=login-btn type=submit>
                    <span>
                        LOGIN
                    </span>
                </button>
            </form>
            <div class=signup>
                Don't have an account?
                <a href=#>
                    Create Account
                </a>
            </div>
        </div>
        <div class=success-screen id=successScreen>
            <div class=success-icon>
                <div class=check></div>
            </div>
            <h2>
                Login Successful!
            </h2>
            <p>
                Welcome back! You have successfully logged in.
            </p>
            <div class=loading>
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
    </div>

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Poppins, sans-serif
        }

body {
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
			scale:0.8;
            background: radial-gradient(circle at 20% 20%, #00f5ff33, transparent 35%), radial-gradient(circle at 80% 80%, #7b2cff44, transparent 35%), #080b18
        }

.liquid-bg {
            position: fixed;
            inset: 0;
            overflow: hidden;
            z-index: -1
        }

.blob {
            position: absolute;
            border-radius: 50%;
            animation: liquidMove 12s infinite ease-in-out
        }

.blob:first-child {
            width: 350px;
            height: 350px;
            background: linear-gradient(135deg, #00f5ff, #06f);
            top: -100px;
            left: -80px
        }

.blob:nth-child(2) {
            width: 300px;
            height: 300px;
            background: linear-gradient(135deg, #f0c, #7b2cff);
            right: -70px;
            bottom: -80px;
            animation-delay: -4s
        }

.blob:nth-child(3) {
            width: 180px;
            height: 180px;
            background: linear-gradient(135deg, #0f9, #0cf);
            left: 45%;
            top: 10%;
            animation-delay: -7s
        }

@keyframes liquidMove {

0%,
            100% {
                transform: translate(0, 0) scale(1);
                border-radius: 50%
            }

25% {
                transform: translate(100px, 60px) scale(1.15);
                border-radius: 45% 55% 60% 40%
            }

50% {
                transform: translate(-50px, 130px) scale(.9);
                border-radius: 60% 40% 45% 55%
            }

75% {
                transform: translate(80px, -40px) scale(1.1);
                border-radius: 35% 65% 55% 45%
            }
        }

.login-box {
            width: 400px;
            min-height: 500px;
            padding: 45px 40px;
            position: relative;
            border-radius: 30px;
            background: rgba(255, 255, 255, .08);
            border: 1px solid rgba(255, 255, 255, .18);
            backdrop-filter: blur(25px);
            -webkit-backdrop-filter: blur(25px);
            box-shadow: 0 30px 80px rgba(0, 0, 0, .45), inset 0 0 30px rgba(255, 255, 255, .04);
            overflow: hidden;
            transition: .6s ease
        }

.login-box::before {
            content: "";
            position: absolute;
            width: 220px;
            height: 220px;
            border-radius: 50%;
            background: #00eaff;
            filter: blur(80px);
            opacity: .15;
            top: -120px;
            right: -80px;
            animation: shine 6s infinite alternate
        }

@keyframes shine {
            from {
                transform: translate(0, 0) scale(1)
            }

to {
                transform: translate(-80px, 120px) scale(1.5)
            }
        }

.logo {
            width: 75px;
            height: 75px;
            margin: auto;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 30px;
            font-weight: 700;
            background: linear-gradient(135deg, #00eaff, #06f, #8a2be2);
            box-shadow: 0 0 15px #00eaff, 0 0 40px #0066ff88;
            animation: logoFloat 3s infinite ease-in-out
        }

@keyframes logoFloat {

0%,
            100% {
                transform: translateY(0)
            }

50% {
                transform: translateY(-8px)
            }
        }

h2 {
            margin-top: 20px;
            text-align: center;
            color: #fff;
            font-size: 30px
        }

.subtitle {
            text-align: center;
            color: #aaa;
            font-size: 13px;
            margin: 8px 0 30px
        }

.input-box {
            position: relative;
            margin-bottom: 25px
        }

.input-box input {
            width: 100%;
            height: 55px;
            padding: 0 20px;
            border: 1px solid rgba(255, 255, 255, .2);
            border-radius: 15px;
            outline: 0;
            color: #fff;
            font-size: 15px;
            background: rgba(255, 255, 255, .06);
            transition: .4s
        }

.input-box label {
            position: absolute;
            left: 20px;
            top: 18px;
            color: #aaa;
            font-size: 14px;
            pointer-events: none;
            transition: .4s
        }

.input-box input:focus,
        .input-box input:valid {
            border-color: #00eaff;
            box-shadow: 0 0 10px #00eaff55, inset 0 0 15px #00eaff11
        }

.input-box input:focus+label,
        .input-box input:valid+label {
            top: -9px;
            left: 15px;
            padding: 0 8px;
            border-radius: 5px;
            color: #00eaff;
            background: #101525
        }

.options {
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #aaa;
            font-size: 12px;
            margin-bottom: 25px
        }

.options a {
            color: #00eaff;
            text-decoration: none
        }

.login-btn {
            width: 100%;
            height: 55px;
            border: none;
            border-radius: 15px;
            position: relative;
            overflow: hidden;
            cursor: pointer;
            color: #fff;
            font-size: 16px;
            font-weight: 600;
            background: linear-gradient(90deg, #00c6ff, #0072ff, #8a2be2);
            box-shadow: 0 10px 30px #0072ff55;
            transition: .4s
        }

.login-btn::after,
        .login-btn::before {
            content: "";
            position: absolute;
            width: 120px;
            height: 120px;
            border-radius: 45%;
            background: rgba(255, 255, 255, .25);
            animation: buttonLiquid 5s infinite linear
        }

.login-btn::before {
            left: -30px;
            bottom: -80px
        }

.login-btn::after {
            right: -30px;
            top: -80px;
            animation-delay: -2s
        }

.login-btn span {
            position: relative;
            z-index: 2
        }

@keyframes buttonLiquid {
            0% {
                transform: rotate(0) translateX(0)
            }

50% {
                transform: rotate(180deg) translateX(30px)
            }

100% {
                transform: rotate(360deg) translateX(0)
            }
        }

.login-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 40px #00c6ff66, 0 0 25px #0072ff88
        }

.signup {
            text-align: center;
            margin-top: 25px;
            color: #aaa;
            font-size: 13px
        }

.signup a {
            color: #00eaff;
            text-decoration: none;
            font-weight: 600
        }

.success-screen {
            display: none;
            min-height: 410px;
            text-align: center;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            position: relative;
            z-index: 5
        }

.success-icon {
            width: 110px;
            height: 110px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            background: rgba(0, 255, 170, .12);
            border: 2px solid #0fa;
            box-shadow: 0 0 20px #0fa, 0 0 60px #00ffaa66;
            animation: successPop .7s cubic-bezier(.17, .67, .3, 1.4), successPulse 2s 1s infinite
        }

.check {
            width: 35px;
            height: 65px;
            border-right: 6px solid #0fa;
            border-bottom: 6px solid #0fa;
            transform: rotate(45deg) scale(0);
            animation: checkDraw .5s .45s forwards;
            filter: drop-shadow(0 0 8px #00ffaa)
        }

@keyframes successPop {
            0% {
                transform: scale(0) rotate(-180deg);
                opacity: 0
            }

70% {
                transform: scale(1.15) rotate(10deg)
            }

100% {
                transform: scale(1) rotate(0);
                opacity: 1
            }
        }

@keyframes checkDraw {
            to {
                transform: rotate(45deg) scale(1)
            }
        }

@keyframes successPulse {

0%,
            100% {
                box-shadow: 0 0 20px #0fa, 0 0 60px #00ffaa66
            }

50% {
                box-shadow: 0 0 40px #0fa, 0 0 100px #00ffaa88
            }
        }

.success-screen h2 {
            margin-top: 30px;
            color: #0fa;
            font-size: 28px;
            animation: successText .7s .4s both
        }

.success-screen p {
            margin-top: 10px;
            color: #aaa;
            font-size: 14px;
            animation: successText .7s .6s both
        }

@keyframes successText {
            from {
                opacity: 0;
                transform: translateY(20px)
            }

to {
                opacity: 1;
                transform: translateY(0)
            }
        }

.loading {
            margin-top: 25px;
            display: flex;
            gap: 6px
        }

.loading span {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #0fa;
            animation: dots 1s infinite ease-in-out
        }

.loading span:nth-child(2) {
            animation-delay: .15s
        }

.loading span:nth-child(3) {
            animation-delay: .3s
        }

@keyframes dots {

0%,
            100% {
                transform: translateY(0);
                opacity: .4
            }

50% {
                transform: translateY(-8px);
                opacity: 1
            }
        }

.form-content {
            transition: .5s ease
        }

.form-content.hide {
            animation: formHide .6s forwards
        }

@keyframes formHide {
            0% {
                opacity: 1;
                transform: scale(1)
            }

100% {
                opacity: 0;
                transform: scale(.7) rotateX(90deg)
            }
        }

.success-screen.show {
            display: flex;
            animation: screenAppear .7s forwards
        }

@keyframes screenAppear {
            from {
                opacity: 0;
                transform: scale(.5)
            }

to {
                opacity: 1;
                transform: scale(1)
            }
        }

@media(max-width:480px) {
            .login-box {
                width: calc(100% - 30px);
                padding: 35px 25px
            }
        }

- CSS Liquid animation Login form

Live Preview