1.實現(xiàn)效果
input1.gif
2.實現(xiàn)原理
CSS 選擇器： CSS 中，選擇器是選取需設置樣式的元素的模式。
CSS :focus 選擇器：
一個輸入字段獲得焦點時選擇的樣式，:focus選擇器用于選擇具有焦點的元素唆鸡，接受鍵盤事件或其他用戶輸入的元素。
CSS :invalid 選擇器:
:invalid 選擇器用于在表單元素中的值是非法時設置指定樣式。 :invalid 選擇器只作用于能指定區(qū)間值的元素贮尖，例如 input 元素中的 min 和 max 屬性，及正確的 email 字段, 合法的數(shù)字字段等趁怔。
CSS :valid 選擇器:
:valid 選擇器在表單元素的值需要根據(jù)指定條件驗證時設置指定樣式湿硝。:valid 選擇器只作用于能指定區(qū)間值的元素薪前，例如 input 元素中的 min 和 max 屬性，及正確的 email 字段, 合法的數(shù)字字段等关斜。
element+element 選擇器（相鄰兄弟選擇器）：可選擇緊接在另一個元素后的元素示括，且二者有相同父元素。
例：h1+p{}：選擇緊跟 h1元素的首個 p元素痢畜。
element1~element2 選擇器：
例：p ~ ul：選擇前面有p 元素的每個 ul元素垛膝。
CSS3 :not 選擇器::not(selector) 選擇器匹配每個元素是不是指定的元素/選擇器。
:placeholder-shown：使用此偽類來設置當前顯示占位符文本的輸入的樣式丁稀。將樣式應用于具有占位符文本的 input或 textarea吼拥。:placeholder-showd必須具有占位符（placeholder），當輸入文本不為空時候线衫，動態(tài)設置input框樣式凿可。
input 的required 屬性：
required 屬性是一個布爾屬性。required 屬性規(guī)定必需在提交表單之前填寫輸入字段授账。required 屬性適用于下面的 input 類型：text枯跑、search、url白热、tel敛助、email、password棘捣、date pickers辜腺、number、checkbox乍恐、radio 和 file评疗。
CSS font-style 屬性：
font-style屬性指定文本的字體樣式。
| 值 | 描述 |
|---|---|
| normal | 默認值茵烈。瀏覽器顯示一個標準的字體樣式百匆。 |
| italic | 瀏覽器會顯示一個斜體的字體樣式。 |
| oblique | 瀏覽器會顯示一個傾斜的字體樣式呜投。 |
| inherit | 規(guī)定應該從父元素繼承字體樣式加匈。 |
3.實現(xiàn)步驟
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>請輸入搜索內(nèi)容</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>請輸入搜索內(nèi)容</span>
</div>
</section>
</div>
</body>
</html>
