1.实现效果
input1.gif
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属性指定文本的字体样式。
| 值 | 描述 |
|---|---|
| normal | 默认值。浏览器显示一个标准的字体样式。 |
| italic | 浏览器会显示一个斜体的字体样式。 |
| oblique | 浏览器会显示一个倾斜的字体样式。 |
| inherit | 规定应该从父元素继承字体样式。 |
3.实现步骤
3.1 示例1
1.gif
- 先写一个input标签+搜索按钮。
<div class=" input-box mb20">
<input type="text" class="input" />
<span class="span">搜</span>
</div>
.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属性，修改input的宽度，添加transition过渡效果。通过加号选择器，改变span标签的样式。
.input:focus {
width: 280px;
outline: none;
box-shadow: none;
}
.input:focus+.span {
background-color: pink;
color: #fff;
}
3.2 示例2
2.gif
- 先写一个圆形按钮+input输入框。
<div class="btn-box mb20">
<span>搜</span>
<input type="text" placeholder=" " />
</div>
.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;
}
- 悬浮按钮时，修改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
}
3.3 示例3
3.gif
- 先写一个input输入框+span文字+一条横线（x轴缩放为0）。
<div class="input-boxLine" >
<input type="text" required />
<div class="line"></div>
<span>请输入搜索内容</span>
</div>
.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获取焦点时（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);
}
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>
