## 特效一覽

**劃線動態**：

![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xODcyMDM1OC0yY2E3OWZlYzUxOTJlMDIw)

**動態邊框**：

![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xODcyMDM1OC01YjBlZTEwY2MwMjg3OGFi)

## 劃線動態

### 效果圖

![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xODcyMDM1OC03NTAxYjM2NDUxNGFjMTVk)

### 原理和程式碼

`:before` 和 `:after`偽元素指定了一個元素文件樹內容之前和之後的內容。由於`input`標籤不是可插入內容的容器。所以這裡下劃線無法透過偽元素來實現。需要藉助其他 dom 節點。

```
<div>
  <input type="text">
  <span></span>
</div>
web前端開發學習Q-q-u-n： 784783012 ，分享開發工具，零基礎，進階影片教程，希望新手少走彎路
```

包裹在外的父元素`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;
}

```

## 動態邊框

### 效果圖

![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xODcyMDM1OC1lYTVmM2ZkMDkxMzk5ZTBh)

### 原理和程式碼

如動態圖所示，有 4 條邊框。所以除了`input`元素外，還需要準備其他 4 個 dom。為了方便定位，巢狀一個父級元素。

```
<div>
  <input type="text">
  <span class="bottom"></span>
  <span class="right"></span>
  <span class="top"></span>
  <span>
</span></div>
web前端開發學習Q-q-u-n： 784783012 ，分享開發工具，零基礎，進階影片教程，希望新手少走彎路
```

和「劃線動態」類似，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;
}
web前端開發學習Q-q-u-n： 784783012 ，分享開發工具，零基礎，進階影片教程，希望新手少走彎路
```

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

相關文章