• HTML
• CSS

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="input-area">
    <input type="text" placeholder="What do you want to search?">
    <div class="icons">
        <div><i class="fa-solid fa-wand-magic-sparkles"></i></div>
        <div><i class="fa-solid fa-hat-wizard"></i></div>
        <div><i class="fa-solid fa-hand-sparkles"></i></div>
        <div><i class="fa-solid fa-wand-magic-sparkles"></i></div>
    </div>
    <button><i class="fa-solid fa-magnifying-glass"></i></button>
</div>
<!-- https://www.youtube.com/watch?v=G5QVsjuSI7s -->

CSS

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
body{
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;
    background:linear-gradient(45deg,#b06ab3,#4568dc);
}
.input-area{
    position:relative;
    height:60px;
    width:400px;
    background:white;
    border-radius:10px;
    display:flex;
    overflow:hidden;
}
.input-area input{
    flex:1;
    outline:none;
    border:0;
    border-radius:10px;
    padding:10px 15px;
}
.input-area input:not(:placeholder-shown) + .icons{
    display:none;
}
.input-area button{
    background:transparent;
    font-size:1.1rem;
    outline:none;
    border:0;
    padding:20px;
    cursor:pointer;
    color:red;
}
.input-area .icons{
    position:absolute;
    top:0;
    left:230px;
    pointer-events:none;
    animation:slide 6s linear infinite;
}
.input-area .icons div{
    height:60px;
    display:flex;
    justify-content:center;
    align-items:center;
    color:red;
}

@keyframes slide{
    
    0%{
        transform:translateY(0px);
        
    }
    5%{
        transform:translateY(-60px);
        
    }
    30%{
        transform:translateY(-60px);
        
    }
    35%{
        transform:translateY(-120px);
        
    }
    65%{
        transform:translateY(-120px);
        
    }
    70%{
        transform:translateY(-180px);
        
    }
    100%{
        transform:translateY(-180px);
        
    }
}

/*
    All the credits to: https://www.youtube.com/watch?v=G5QVsjuSI7s
*/