前端動畫專題（二）：輸入框特效

本文來自「心譚博客」的《動畫設計·輸入框特效》，更多文章放在了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;
}
複製代碼

參考連接

• 爲何 input 不支持僞元素(:after,:before)？

更多文章

• 動畫設計·字體特效
• 動畫設計·輸入框特效
• 動畫設計·按鈕特效
• 動畫設計·Loader特效·基礎篇
• 動畫設計·Loader特效·進階篇