搜索框

来一张效果图看看，在这里不能传视频，（鼠标放置时，搜索框变长，背景颜色改变）：

先来看一下HTML代码，很简单，就是设置基本的搜索框：

先来设置他的长度改变，代码（用到了hover选择器和transtion过渡）：

效果如下：

再来改变背景色，同样的：

下面就是 那个搜索的图标写入：还使用了before和after选择器：其中before写的是那个圆圈，after邪恶的是把儿：

需要说明一下的是：

这里的position定位，还是不懂，用它和没用差别特别大，

还有一点：就是你点击搜索框的时候，他会有一个蓝色的框出现，不知道为什么，，还有一点，，输入的字是从图标后面输入的，而我写的忽略了图标，直接从框开始。，这几点问题，之后更新解决

下面来看一下css完整代码：