现在大多数的网站搜索框只是一个搜索的icon图，只有当你鼠标一上去的时候才会自动伸长输入搜索，移开时自动收缩
话不多说上代码
html部分使用icon和input两个部分，加上简单的css样式实现，如图
当你的鼠标移上去的时候，长度增加到自己想要的或者合适的长度即停止
js代码主要使用setInterval实现， width++反之--；同时添加当长度和时候自动添加输入光标由setTimeout+.focus()实现
当你鼠标移开时如果没有内容随机缩回，但是如果输入了内容此时就应该保持这是的样子
好了大概就是这样，如果有更多更好的方法可以实现欢迎邮箱交流：[email protected]