## 特效一覽

**劃線動態**：

![](https://upload-images.jianshu.io/upload_images/18720358-2680c3c321892566?imageMogr2/auto-orient/strip)

**背景高亮**：

![](https://upload-images.jianshu.io/upload_images/18720358-e8f2a7799602f776?imageMogr2/auto-orient/strip)

**色塊進出**：

![](https://upload-images.jianshu.io/upload_images/18720358-b2d098f5361ded29?imageMogr2/auto-orient/strip)

## 劃線動態

### 效果圖

![](https://upload-images.jianshu.io/upload_images/18720358-6eeb52b17a78948a?imageMogr2/auto-orient/strip)

### 原理

首先，利用`::after`和`::before`就可以畫出上下兩條線，所以只需要一個 dom 元素即可。

其次，對於滑鼠移入的動畫，要給上面兩個偽元素設定`:hover`選擇器。

最後是處理動畫方向。我們以上面的線條為例，在滑鼠移入的時候，是從右到左變化的。這裡是透過設定`transform-origin`屬性來修改動畫方向。下面的線條同理，方向相反即可。

**注意**：程式碼是透過`scaleX`來實現縮放，相比於設定`width`，會啟用 GPU，避免重繪。

### 程式碼

html 程式碼：

```

web前端開發學習Q-q-u-n： 784783012 ，分享開發工具，零基礎，進階影片教程，希望新手少走彎路
```

css 程式碼：

```
span {
  color: #595959;
  position: relative;
  z-index: 1;
}

span::before,
span::after {
  content: "";
  z-index: -1;
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: #262626;
  transform: scaleX(0);
  transition: transform 0.2s ease-in-out;
}

span::before {
  top: 0;
  transform-origin: center right;
}

span::after {
  bottom: 0;
  transform-origin: center left;
}

span:hover {
  cursor: pointer;
}

span:hover::before {
  transform-origin: center left;
  transform: scaleX(1);
}

span:hover::after {
  transform-origin: center right;
  transform: scaleX(1);
}
web前端開發學習Q-q-u-n： 784783012 ，分享開發工具，零基礎，進階影片教程，希望新手少走彎路
```

## 背景高亮

### 效果圖

![](https://upload-images.jianshu.io/upload_images/18720358-77d7f8209c8e7c40?imageMogr2/auto-orient/strip)

### 原理

首先，利用`::before`偽元素就可以模擬出覆蓋需要的色塊。所以僅僅需要一個 dom 元素。這裡偽元素的`content`元素必須給，否則不會顯示（有些坑）。

其次，色塊大小改變是透過`scaleY`來設定的，原因和第一個動畫原因一樣。

最後，偽元素的色塊會覆蓋 dom 上的元素。所以需要給 dom 元素設定`z-index`，並且讓其生效並大於偽元素的`z-index`。

### 程式碼

html 程式碼：

```

```

css 程式碼：

```
span {
  color: #d9d9d9;
  position: relative;
  z-index: 1;
}

/* 
1\. content必須給
2\. 用transform覆蓋 配合 z-index
*/
span::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -0.25em;
  right: -0.25em;
  z-index: -1;
  background: #262626;
  transform: scaleY(0.2);
  transform-origin: center bottom;
  transition: all 0.1s linear;
}

span:hover {
  cursor: pointer;
}

span:hover::before {
  transform: scaleY(1);
}

```

## 色塊進出

### 效果圖

![](https://upload-images.jianshu.io/upload_images/18720358-ba4a8cb800968b43?imageMogr2/auto-orient/strip)

### 原理

這和上一個“背景高亮”動畫類似，不同的是色塊的位置和大小變化方向不同。其餘基本一致。

### 程式碼

html:

```

```

css:

```
span {
  color: #d9d9d9;
  position: relative;
  z-index: 1;
}

span::before {
  content: "";
  z-index: -1;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #262626;
  transform-origin: center right;
  transform: scaleX(0);
  transition: transform 0.1s linear;
  /* 這裡不要指明為 all */
}

span:hover {
  cursor: pointer;
}

span:hover::before {
  transform-origin: center left;
  transform: scaleX(1);
}
web前端開發學習Q-q-u-n： 784783012 ，分享開發工具，零基礎，進階影片教程，希望新手少走彎路
```</article>

web前端動畫專題（1）：字型特效

相關文章