滚动出现的搜索框

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

前言

某天，产品人员认为搜索输入框单纯摆放在页面太无趣了，得给它加点特效。平时只显示搜索按钮，当用户把鼠标移到搜索按钮时，搜索按钮从左到右滚动，搜索输入框随之出现，效果如下。

效果

分析

其实思路不难，首先，创建一个div使其包含input和button，input宽度设置为100%，即与父级div同宽度，那么div宽度改变时，input也会随之改变；然后使用绝对定位将button固定在div右侧，这样，当div的宽度变大时，button的位置会随之改变，看起来就像是在移动，离滚动还差一个旋转，加个transform:rotate()即可。
然后，设定div的左右padding，让左右padding之和为按钮宽度，这样可以保证平时能够完整地显示搜索按钮；然后将div初始宽度为零，因为input的宽度被设定为100%，继承了div的宽度，如果div宽度为零，那么input的宽度也为零，达到了平时隐藏input的目的。
最后，在这些元素上设置过渡属性；当有鼠标悬浮于div时(从用户的角度来看就是放在搜索按钮上)，改变div的宽度，input的宽度也会随之改变，从而显示出来。

代码

1.首先，进行布局，并写上基础的样式，示例代码如下：

<div id="app">
  <input />
  <button> 搜 </button>
</div>

input {
  border: none;
  height: 50px;
  line-height: 50px;
  font-size: 20px;
  /** 主要是将 input 宽度设置为 100%，好继承 div 的宽度 */
  width: 100%;
  border-bottom: 2px solid #7c3aed;
}
input:hover, input:focus {
  outline: none;
}

button {
  border: none;
  background-image: linear-gradient(to right, #8b5cf6, #d946ef);
  border-radius: 50%;
  color: #fff;
  width: 50px;
  height: 50px;
  position: absolute;
  bottom: 0;
  /** 将按钮位置设置为right:0，当div宽度变大时，button就会随之移动 */
  right: 0;
  transition: all 0.5s;
  cursor: pointer;
}

#app {
  position: relative;
  /** 设置左右padding */
  padding: 0 25px;
  /** 平时将width设为零，用于隐藏input */
  width: 0;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.5s;
}

div设置的左右padding有两个功能，一个是平时div宽度为零，又设置了overflow: hidden;，如果没有左右padding，就没有位置可以显示搜索按钮；第二个是保证input与button相交但是不会超出，看上去就像是button滚动过后的留下的痕迹，如下： 如果不设置左右padding的话，会超出一部分，不像是被button滚出来的，如下： 2.最后设置鼠标悬浮于div时的样式和button的旋转效果：

#app:hover {
  width: 500px;
}

#app:hover button {
  transform: rotate(720deg);
}