前端实战案例①动态搜索框

更多前端简单小组件尽在主页！

---

效果图

 

开始整活

html代码

整体HTML就是一个div套着一个input跟一个a，a标签中放icon，我是复制的svg。

        <div class="search-box">
            <input class="search-txt" type="text" placeholder="动态搜索框">
            <a class="search-btn">
            <!--这里是icon，我放的svg-->
            </a>
        </div>

在这个动上面，我这里利用的是hover效果，看上面动图也能看出来，鼠标移动上去它就变长，移开他就还原了，同时将按钮的颜色更改一下是为了让用户的体验提升一点。

总体上来说，利用css中的hover，改变width，达成长度变化的效果。

css代码

    body{
        margin: 0;
        padding: 0;
        /* background: #e94118; */
        background-color: #FF670F;
    }
    .search-box{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        background: #2f3640;
        height: 40px;
        border-radius: 40px;
        padding: 10px;
        display: flex;
        justify-content: center;
    }
    .search-box:hover>.search-txt{
        width: 200px;
        padding: 0 6px;
    }
    .search-box:hover>.search-btn{
        background: white;
    }
    .search-btn{
        float: right;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #2f3640;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: 0.4s;
    }
    .search-txt{
        border: none;
        background: none;
        outline: none;
        float: left;
        padding: 0;
        color: white;
        font-size: 16px;
        transition: 0.4s;
        line-height: 40px;
        width: 0px;
    }

 

---

更多前端简单小组件尽在主页！喜欢可以收藏哦！