## 特效一览

**划线动态**：

![](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 代码：

```
<body>
 xin-tan.com
</body>
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 代码：

```
<body>
 xin-tan.com
</body>

```

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:

```
<body>
 xin-tan.com
</body>

```

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 ，分享开发工具，零基础，进阶视频教程，希望新手少走弯路
```

ITPub博客

web前端动画专题（1）：字体特效

最新文章