效果

制作原理

使用 CSS :hover 选择器控制搜索框的width属性值

控制 .box的 transform: translate(a,b); 属性值，可设置搜索框向那个位置伸缩，默认为同时向左右两边伸缩；

若设置为 transform: translate(-50%,-50%); 则向左边伸缩

源码

HTML

CSS