来一张效果图看看,在这里不能传视频,(鼠标放置时,搜索框变长,背景颜色改变):

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

先来设置他的长度改变,代码(用到了hover选择器和transtion过渡):


再来改变背景色,同样的:

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

需要说明一下的是:

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

网友评论