本文來自「心譚部落格」的《動畫設計·輸入框特效》，更多文章放在了Github
歡迎交流和Star
特效一覽
劃線動態：
動態邊框：
劃線動態
效果圖
原理和程式碼
:before 和 :after偽元素指定了一個元素文件樹內容之前和之後的內容。由於input標籤不是可插入內容的容器。所以這裡下劃線無法通過偽元素來實現。需要藉助其他 dom 節點。
<div>
<input type="text" />
<span></span>
</div>
複製程式碼包裹在外的父元素div應該設定成inline-block，否則寬度會滿屏。
div {
position: relative;
display: inline-block;
}
複製程式碼input 標籤需要禁用預設樣式：
input {
outline: none;
border: none;
background: #fafafa;
}
複製程式碼span標籤實現「左進右出」的動態，需要改變transform-origin方向。為了避免迴流重繪，通過scaleX來實現寬度變化的視覺效果。
input ~ span {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1px;
background-color: #262626;
transform: scaleX(0);
transform-origin: right center;
transition: transform 0.3s ease-in-out;
}
input:focus ~ span {
transform: scaleX(1);
transform-origin: left center;
}
複製程式碼動態邊框
效果圖
原理和程式碼
如動態圖所示，有 4 條邊框。所以除了input元素外，還需要準備其他 4 個 dom。為了方便定位，巢狀一個父級元素。
<div>
<input type="text">
<span class="bottom"></span>
<span class="right"></span>
<span class="top"></span>
<span>
</div>
複製程式碼和「劃線動態」類似，input 和 div 的樣式基本一樣。為了好看，改一下 padding 屬性。
div {
position: relative;
display: inline-block;
padding: 3px;
}
input {
outline: none;
border: none;
background: #fafafa;
padding: 3px;
}
複製程式碼對於其他 4 個 span 元素，它們的位置屬性，動畫屬性，以及顏色都是相同的：
.bottom,
.top,
.left,
.right {
position: absolute;
background-color: #262626;
transition: transform 0.1s ease-in-out;
}
複製程式碼對於.bottom 和.top，它們的變化方向是水平；對於.left 和.right，它們的變化方向是垂直。
.bottom,
.top {
left: 0;
right: 0;
height: 1px;
transform: scaleX(0);
}
.left,
.right {
top: 0;
bottom: 0;
width: 1px;
transform: scaleY(0);
}
複製程式碼下面就是處理延時的特效。動態圖中，動畫按照下、右、上、左的順序依次變化。藉助的是transition-delay屬性，來實現動畫延遲。
.bottom {
bottom: 0;
transform-origin: right center;
}
input:focus ~ .bottom {
transform: scaleX(1);
transform-origin: left center;
}
.top {
top: 0;
transform-origin: left center;
transition-delay: 0.2s;
}
input:focus ~ .top {
transform: scaleX(1);
transform-origin: right center;
}
.right {
transform-origin: top center;
right: 0;
transition-delay: 0.1s;
}
input:focus ~ .right {
transform: scaleY(1);
transform-origin: bottom center;
}
.left {
left: 0;
transform-origin: bottom center;
transition-delay: 0.3s;
}
input:focus ~ .left {
transform: scaleY(1);
transform-origin: top center;
}
複製程式碼