day-03

缓动搜索框

HTML

<div class="search">
        <input type="search" class="ipt" placeholder="Search...">
        <button class="btn">

        </button>
    </div>

Css

*{
        margin: 0;
        padding: 0;
        list-style: none;
        box-sizing: border-box;
    }
    body{
        background-image: linear-gradient(90deg,#7d5fff, #7158e2);
        font-family: 'Roboto', sans-serif;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
        overflow: hidden;
        margin: 0;
    }
    .search{
        position: relative;
        height: 50px;
    }
    .search .ipt{
        background-color: #fff;
        border: 0;
        width: 50px;
        height: 50px;
        padding: 15px;
        font-size: 18px;
        /* 变宽动画 */
        transition: width 0.3s ease;
    }
    .btn{
        background-color: #fff;
        border: 0;

        height: 50px;
        width: 50px;
        cursor: pointer;
        position: absolute;
        top: 0;
        left: 0;
        font-size: 24px;
        transition: transform 0.3s ease;
    }
    .btn:focus,.ipt:focus{
        outline: none;
    }
    .search.active .ipt{
         /* active：为触发效果时所对应的css操作 */
        width: 200px;
    }
    .search.active .btn{
        /* 按钮向右走198px */
        transform: translateX(198px);

    }

JS

 // 元素获取
        const search = document.getElementsByClassName('search')[0];
        const btn = document.querySelector('.btn')
        const ipt = document.querySelector('.ipt')
        // 按钮事件监听
        btn.addEventListener('click',()=>{
            //点击切换类
            search.classList.toggle('active')
            //切换完后自动聚焦
            ipt.focus()
        })

点击前

点击后