CSS世界之搜索框变形动画

效果展示

实现思路

将 <label> 作为容器盒子

利用 <input> 和 <span> 拼接出搜索图标的样式

选中输入框时，将 <span> 宽度变长，隐藏 <spna>，以实现动画效果

实现代码

1
2
3
4
<label>
  <input type="text" required>
  <span class="line"></span>
</label>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
label{
  position: relative;
}
input{
  width: 38px;
  height: 38px;
  line-height: 38px;
  outline-style: none;
  font-size: 16px;
  color: #333;
  border: 3px solid #a8a8a8;
  border-radius: 19px;
  padding: 0 16px;
  box-sizing: border-box;
  transition: all .4s ease-in-out;
}
.line{
  width: 3px;
  height: 14px;
  display: block;
  background-color: #a8a8a8;
  transform: rotate(320deg);
  position: absolute;
  left: 32px;
  top: 30px;
  z-index: 10;
  opacity: 1;
  transition: all .4s ease-in-out;
}
input:focus,input:valid{
  width: 180px;
}
input:focus+.line,input:valid+.line{
  width: 1px;
  height: 16px;
  left: 19px;
  top: 10px;
  opacity: 0;
  transform: rotate(360deg);
}