做一个动态搜索框

前言

动态的搜索框已经不是什么稀有的东西了，因为它的动，它可以出现在任何符合它位置的地方。

今天咱也来整一个，看看效果？

动态搜索框效果图.gif

大致就是最开始显示的是一个图标，鼠标移动上去的话，它就变成了正常搜索框的样子可以进行输入并搜索。

来看一下如何实现的！

开始整活

整体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，达成长度变化的效果。

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;
}