效果展示：

代码展示：

HTML：

<div class="searchBox">
        <div class="search">
            <ion-icon><svg t="1664034092384" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7073" width="32" height="32"><path d="M760.090355 263.551488c-17.47807-41.321104-42.487673-78.426187-74.343195-110.281709s-68.960605-56.865125-110.281709-74.343195c-42.784432-18.092054-88.219227-27.27111-135.055952-27.27111-46.826492 0-92.261287 9.179057-135.055952 27.27111-41.310871 17.47807-78.415954 42.487673-110.271476 74.343195s-56.865125 68.960605-74.343195 110.281709c-18.092054 42.784432-27.27111 88.219227-27.27111 135.055952 0 46.826492 9.179057 92.261287 27.27111 135.055952 17.47807 41.310871 42.487673 78.415954 74.343195 110.271476s68.960605 56.865125 110.271476 74.343195c42.794665 18.092054 88.22946 27.27111 135.055952 27.27111 46.836725 0 92.27152-9.179057 135.055952-27.27111 41.321104-17.47807 78.426187-42.487673 110.281709-74.343195s56.865125-68.960605 74.343195-110.271476c18.092054-42.794665 27.27111-88.22946 27.27111-135.055952C787.361465 351.770715 778.182408 306.33592 760.090355 263.551488zM656.797827 614.985536c-57.796334 57.796334-134.64663 89.63139-216.388329 89.63139s-158.581762-31.835056-216.378096-89.63139c-57.796334-57.786101-89.63139-134.636397-89.63139-216.378096s31.835056-158.591995 89.63139-216.388329 134.636397-89.63139 216.378096-89.63139 158.591995 31.835056 216.388329 89.63139c57.796334 57.796334 89.63139 134.64663 89.63139 216.388329S714.594161 557.199435 656.797827 614.985536z" p-id="7074"></path><path d="M954.805058 933.397493c-3.990894 4.001127-9.230222 5.996574-14.46955 5.996574s-10.478655-1.995447-14.46955-5.996574l-193.855126-193.844893c-7.981788-7.992021-7.981788-20.947078 0-28.939099 8.002254-7.992021 20.957311-7.992021 28.949332 0l193.844893 193.844893C962.79708 912.450415 962.79708 925.405471 954.805058 933.397493z" p-id="7075"></path></svg></ion-icon>
        </div>
        <div class="searchInpt">
            <input type="text" placeholder="Search Here">
        </div>
        <div class="close">
            <ion-icon><svg t="1664036023967" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5996" width="32" height="32"><path d="M806.4 263.2l-45.6-45.6L512 467.2 263.2 217.6l-45.6 45.6L467.2 512 217.6 760.8l45.6 45.6L512 557.6l248.8 248.8 45.6-45.6L557.6 512z" p-id="5997" fill="#8a8a8a"></path></svg></ion-icon>
        </div>
    </div>

css：

body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(45deg, #4e65ff, #92effd);
}
.searchBox{
    position: relative;
    width: 60px;
    height: 60px;
    background: #fff;
    display: flex;
    justify-content: space-between;
    transition: 0.5s;
    overflow: hidden;
    box-shadow: 0 25px 35px rgba(0,0,0,0.1);
}
.searchBox.active{
    width: 360px;
}
.searchBox .search{
    position: relative;
    min-width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    justify-content: center;
    font-size: 1.5em;
    cursor: pointer;
}
.searchBox .close{
    position: relative;
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 1.25em;
    scale: 0;
    transition: 0.5s;
}
.searchBox.active .close{
    scale: 1;
    transition-delay: 0.5s;
}
.searchBox .searchInpt{
    position: absolute;
    left: 60px;
    width: calc(100% - 120px);
    height: 100%;
    line-height: 60px;
}
.searchBox .searchInpt input{
    position: absolute;
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    font-size: 1.25em;
}

JavaScript：

<script>
        let search = document.querySelector('.search');
        let close = document.querySelector('.close');
        let searchBox = document.querySelector('.searchBox');
        search.onclick = function(){
            searchBox.classList.add('active');
        }
        close.onclick = function(){
            searchBox.classList.remove('active');
        }
    </script>