css实现input搜索框展开动画

1.实现效果

2.实现原理

CSS 选择器： CSS 中，选择器是选取需设置样式的元素的模式。

CSS :focus 选择器：
一个输入字段获得焦点时选择的样式，:focus选择器用于选择具有焦点的元素，接受键盘事件或其他用户输入的元素。

CSS :invalid 选择器:
:invalid 选择器用于在表单元素中的值是非法时设置指定样式。 :invalid 选择器只作用于能指定区间值的元素，例如 input 元素中的 min 和 max 属性，及正确的 email 字段, 合法的数字字段等。

CSS :valid 选择器:
:valid 选择器在表单元素的值需要根据指定条件验证时设置指定样式。:valid 选择器只作用于能指定区间值的元素，例如 input 元素中的 min 和 max 属性，及正确的 email 字段, 合法的数字字段等。

element+element 选择器（相邻兄弟选择器）：可选择紧接在另一个元素后的元素，且二者有相同父元素。
例：h1+p{}：选择紧跟 h1元素的首个 p元素。

element1~element2 选择器：
例：p ~ ul：选择前面有p 元素的每个 ul元素。

CSS3 :not 选择器::not(selector) 选择器匹配每个元素是不是指定的元素/选择器。

:placeholder-shown：使用此伪类来设置当前显示占位符文本的输入的样式。将样式应用于具有占位符文本的 input或 textarea。:placeholder-showd必须具有占位符（placeholder），当输入文本不为空时候，动态设置input框样式。

input 的required 属性：
required 属性是一个布尔属性。required 属性规定必需在提交表单之前填写输入字段。required 属性适用于下面的 input 类型：text、search、url、tel、email、password、date pickers、number、checkbox、radio 和 file。

CSS font-style 属性：
font-style属性指定文本的字体样式。

3.实现步骤

3.1 示例1

• 先写一个input标签+搜索按钮。

<div class=" input-box mb20">
	<input type="text" class="input" />
	<span class="span">搜</span>
</div>
1
2
3
4

.input-box {
	position: relative;
	display: inline-block;
}

.input {
	padding: 0 40px 0 20px;
	width: 160px;
	height: 38px;
	font-size: 14px;
	border: 1px solid #eee;
	border-radius: 40px;
	background: #eee;
	transition: width .5s;
	transition-delay: .1s;
}

.span {
	position: absolute;
	top: 4px;
	right: 5px;
	width: 30px;
	height: 30px;
	line-height: 30px;
	padding: 0;
	color: #969696;
	text-align: center;
	background: #222;
	border-radius: 50%;
	font-size: 15px;
	cursor: pointer;
}

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

• 当焦点移入时，input:focus属性，修改input的宽度，添加transition过渡效果。通过加号选择器，改变span标签的样式。

.input:focus {
	width: 280px;
	outline: none;
	box-shadow: none;
}
	
.input:focus+.span {
	background-color: pink;
	color: #fff;
}
1
2
3
4
5
6
7
8
9
10

3.2 示例2

• 先写一个圆形按钮+input输入框。

<div class="btn-box mb20">
	<span>搜</span>
	<input type="text" placeholder=" " />
</div>
1
2
3
4

.btn-box {
	color: #fff;
	width: auto;
	border-radius: 25px;
	min-width: 50px;
	height: 50px;
	line-height: 50px;
	display: inline-block;
	position: relative;
	overflow: hidden;
	background-image: linear-gradient(315deg, #6772FF 0, #00F9E5 100%);
	background-size: 104% 104%;
	cursor: pointer;
}

.btn-box span {
	position: absolute;
	right: 0;
	top: 0;
	width: 50px;
	height: 50px;
	text-align: center;
	font-size: 18px;
	cursor: pointer;
}

.btn-box input {
	display: inline-block;
	background: 0 0;
	border: none;
	color: #fff;
	padding-left: 20px;
	line-height: 50px !important;
	height: 50px;
	box-sizing: border-box;
	vertical-align: 4px;
	font-size: 16px;
	width: 50px;
	transition: all .3s ease-in-out;
	font-style: italic;
	text-transform: uppercase;
	letter-spacing: 5px;
}

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
41
42
43
44

• 悬浮按钮时，修改input宽度，添加transition过渡效果。当输入文字之后，即占位符为空，保持input宽度。

.btn-box:hover input {
	display: inline-block;
	width: 160px;
	padding-right: 50px
}

.btn-box input:not(:placeholder-shown) {
	display: inline-block;
	width: 160px;
	padding-right: 50px
}

1
2
3
4
5
6
7
8
9
10
11
12

3.3 示例3

• 先写一个input输入框+span文字+一条横线（x轴缩放为0）。

<div class="input-boxLine" >
	<input type="text" required />
	<div class="line"></div>
	<span>请输入搜索内容</span>
</div>
1
2
3
4
5

.input-boxLine {
	position: relative;
	width: 160px;
	height: 40px;
	margin-top: 10px;
}

.input-boxLine input {
	width: 100%;
	height: 100%;
	border: none;
	font-size: 17px;
	border-bottom: 1px solid #afaebd;
	color: #fff;
	font-style: italic;
	text-transform: uppercase;
	letter-spacing: 5px;
}

.input-boxLine span {
	position: absolute;
	bottom: 10px;
	left: 0px;
	color: #afaebd;
	pointer-events: none;
	transition: all 0.3s ease;
}

.input-boxLine .line {
	position: absolute;
	bottom: 0px;
	height: 2px;
	width: 100%;
	background-color: #ffaa7f;
	transform: scaleX(0);
	transition: all 0.3s ease;
}
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

• 当input获取焦点时（input:focus）或输入的文字有效时（input:valid），通过~选择器，将span标签文字上移并设置倾斜，横线缩放为1，添加transition过渡效果。

.input-boxLine input:focus~span,
.input-boxLine input:valid~span {
	top: -10px;
	font-size: 12px;
	color: #ffaa7f;
	font-style: oblique;
}

.input-boxLine input:focus~.line,
.input-boxLine input:valid~.line {
	transform: scaleX(1);
}
1
2
3
4
5
6
7
8
9
10
11
12

4.完整代码

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>input输入框展开动画</title>
	</head>
	<link rel="stylesheet" href="../common.css">
	<style>
		.mb20 {
			margin-bottom: 20px;
		}
		body {
			overflow: hidden;
			background: #222;
		}
		.input-box {
			position: relative;
			display: inline-block;
		}
		.input {
			padding: 0 40px 0 20px;
			width: 160px;
			height: 38px;
			font-size: 14px;
			border: 1px solid #eee;
			border-radius: 40px;
			background: #eee;
			transition: width .5s;
			transition-delay: .1s;
		}

		.span {
			position: absolute;
			top: 4px;
			right: 5px;
			width: 30px;
			height: 30px;
			line-height: 30px;
			padding: 0;
			color: #969696;
			text-align: center;
			background: #222;
			border-radius: 50%;
			font-size: 15px;
			cursor: pointer;
		}

		.input:focus {
			width: 280px;
			outline: none;
			box-shadow: none;
		}
		.input:focus+.span {
			background-color: pink;
			color: #fff;
		}
		/* 第二个 */
		.btn-box {
			color: #fff;
			width: auto;
			border-radius: 25px;
			min-width: 50px;
			height: 50px;
			line-height: 50px;
			display: inline-block;
			position: relative;
			overflow: hidden;
			background-image: linear-gradient(315deg, #6772FF 0, #00F9E5 100%);
			background-size: 104% 104%;
			cursor: pointer;
		}
		.btn-box span {
			position: absolute;
			right: 0;
			top: 0;
			width: 50px;
			height: 50px;
			text-align: center;
			font-size: 18px;
			cursor: pointer;
		}
		.btn-box input {
			display: inline-block;
			background: 0 0;
			border: none;
			color: #fff;
			padding-left: 20px;
			line-height: 50px !important;
			height: 50px;
			box-sizing: border-box;
			vertical-align: 4px;
			font-size: 16px;
			width: 50px;
			transition: all .3s ease-in-out;
			font-style: italic;
			text-transform: uppercase;
			letter-spacing: 5px;
		}
		.btn-box:hover input,
		.btn-box input:not(:placeholder-shown) {
			display: inline-block;
			width: 160px;
			padding-right: 50px
		}

		/* 第三个 */
		.input-boxLine {
			position: relative;
			width: 160px;
			height: 40px;
			margin-top: 10px;
		}
		.input-boxLine input {
			width: 100%;
			height: 100%;
			border: none;
			font-size: 17px;
			border-bottom: 1px solid #afaebd;
			color: #fff;
			font-style: italic;
			text-transform: uppercase;
			letter-spacing: 5px;
		}
		.input-boxLine span {
			position: absolute;
			bottom: 10px;
			left: 0px;
			color: #afaebd;
			pointer-events: none;
			transition: all 0.3s ease;
		}
		.input-boxLine .line {
			position: absolute;
			bottom: 0px;
			height: 2px;
			width: 100%;
			background-color: #ffaa7f;
			transform: scaleX(0);
			transition: all 0.3s ease;
		}
		.input-boxLine input:focus~span,
		.input-boxLine input:valid~span {
			top: -10px;
			font-size: 12px;
			color: #ffaa7f;
			font-style: oblique;
		}
		.input-boxLine input:focus~.line,
		.input-boxLine input:valid~.line {
			transform: scaleX(1);
		}
	</style>

	<body>
		<div>
			<section>
				<div class=" input-box mb20">
					<input type="text" class="input" />
					<span class="span">搜</span>
				</div>
			</section>
			<section>
				<div class="btn-box mb20">
					<span>搜</span>
					<input type="text" placeholder=" " />
				</div>
			</section>
			<section>
				<div class="input-boxLine" data-span='苏苏小苏苏'>
					<input type="text" required />
					<div class="line"></div>
					<span>请输入搜索内容</span>
				</div>
			</section>
		</div>
	</body>
</html>

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180

5.更多css相关，尽在苏苏的码云如果对你有帮助，欢迎你的star+订阅！