new effect on the login form

new effect on the login form

html

<div class="login">
    <h1>تسجيل الدخول</h1>
    <form>
        <div class="input-group">
            <input type="text" name="" required>
            <span>اسم المستخدم</span>
            <i class="fa-solid fa-user"></i>
        </div>
        <div class="input-group">
            <input type="password" name="" required>
            <span>كلمة المرور</span>
            <i class="fa-solid fa-lock"></i>
        </div>
        <input type="submit" value="دخول">
    </form>
</div>

css

body {
    min-height: 100vh;
    display: grid;
    place-items: center;
    box-sizing: border-box;
    background-color: #2980b9;
    font-family: "Cairo";
}

.login {
    background-color: #fff;
    padding: 40px 20px;
    border-radius: 15px;
    width: 300px;
    user-select: none;
    position: relative;
}

.login h1 {
    text-align: center;
    margin: 0;
    margin-bottom: 30px;
    color: #162636;
    font-size: 2rem;
}

.login .input-group {
    margin-bottom: 30px;
    position: relative;
}

.login .input-group input {
    width: 100%;
    border: none;
    border-bottom: 1px solid #161616;
    border-radius: 5px;
    outline: none;
    padding-top: 10px;
    padding-bottom: 10px;
    position: relative;
    background-color: transparent;
    color: #161616;
    z-index: 10;
}

.login .input-group input:focus {
    outline: none;
}

.login .input-group span {
    position: absolute;
    right: 5px;
    bottom: 10px;
    transition: 0.5s;
    font-size: 0.9rem;
    color: #777;
    border-radius: 3px;
}

.login .input-group input:focus ~ span,
.login .input-group input:valid ~ span {
    font-size: 0.7rem;
    transform: translate(-220px, -20px)
}

.login .input-group i {
    position: absolute;
    left: 5px;
    bottom: 10px;
    transition: 0.5s;
    font-size: 0.9rem;
    color: #777;
    border-radius: 3px;
}

.login .input-group input:focus ~ i,
.login .input-group input:valid ~ i {
    font-size: 0.7rem;
    transform: translate(280px, -20px)
}

.login input[type="submit"] {
    padding: 10px 20px;
    border-radius: 5px;
    border: none;
    outline: none;
    cursor: pointer;
    width: 100%;
    background-color: #2980b9;
    color: #fff;
    font-family: "Cairo";
}
مصدر الاكواد