## 特效一览

**滑箱**：

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

**果冻**：

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

**脉冲**：

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

**闪光**：

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

**气泡**：

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

## 滑箱特效

### 效果图

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

### 原理

因为 button 元素可以使用 before/after 伪元素，所以借助伪元素，可以实现动态图中的遮盖层。

为了避免回流重绘，滑箱的运动方向是垂直方向，所以使用`scaleY`属性。对于动画的方向，需要借助`transform-origin`改变动画原点。

### 代码实现

html：

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

```

css：

```
button {
  outline: none;
  border: none;
  z-index: 1;
  position: relative;
  color: white;
  background: #40a9ff;
  padding: 0.5em 1em;
}

button::before {
  content: "";
  z-index: -1;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fa541c;
  transform-origin: center bottom;
  transform: scaleY(0);
  transition: transform 0.4s ease-in-out;
}

button:hover {
  cursor: pointer;
}

button:hover::before {
  transform-origin: center top;
  transform: scaleY(1);
}
web前端开发学习Q-q-u-n： 784783012 ，分享开发工具，零基础，进阶视频教程，希望新手少走弯路
```

## 果冻特效

### 效果图

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

### 原理和代码

果冻特效可以分割成 5 个部分，所以无法简单通过 `transition` 来实现，要借助`animation`。并且动画触发的时间点是鼠标移入的时候，因此 `animation` 要在`:hvoer`中声明。

```
button {
  z-index: 1;
  color: white;
  background: #40a9ff;
  outline: none;
  border: none;
  padding: 0.5em 1em;
}

button:hover {
  cursor: pointer;
  animation: jelly 0.5s;
}
web前端开发学习Q-q-u-n： 784783012 ，分享开发工具，零基础，进阶视频教程，希望新手少走弯路
```

下面开始编写 jelly 动画的特效。这个动画可以分解为 4 个部分：「初始 => 挤高 => 压扁 => 回到初始状态」。挤高 和 压扁这里都是通过`scale`来实现的，代码如下：

```
@keyframes jelly {
  0%,
  100% {
    transform: scale(1, 1);
  }

33% {
    transform: scale(0.9, 1.1);
  }

66% {
    transform: scale(1.1, 0.9);
  }
}

```

### 更进一步

上面的动态已经仿真不错了，如果将 4 部分变成 5 部分：「初始 => 挤高 => 压扁 => 挤高 => 回到初始状态」。**视觉上会有一种弹簧的特效**，就像手压果冻后的效果：

```
@keyframes jelly {
  0%,
  100% {
    transform: scale(1, 1);
  }

25%,
  75% {
    transform: scale(0.9, 1.1);
  }

50% {
    transform: scale(1.1, 0.9);
  }
}
web前端开发学习Q-q-u-n： 784783012 ，分享开发工具，零基础，进阶视频教程，希望新手少走弯路
```

## 脉冲特效

### 效果图

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

### 原理和代码

首先，还是去掉 button 的默认样式。注意设置 button 的`z-index`属性并且让其生效，要保证其大于 `::before` 的 `z-index` 属性，**防止 dom 元素被伪元素覆盖**。

```
button {
  position: relative;
  z-index: 1;
  border: none;
  outline: none;
  padding: 0.5em 1em;
  color: white;
  background-color: #1890ff;
}

button:hover {
  cursor: pointer;
}

```

剩下的就是设置伪元素。因为脉冲特效给人的感觉是“镂空”放大。因此，变化对象是 `border` 属性。而镂空的效果，是通过透明背景来实现的。

```
button::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  border: 4px solid #1890ff;
  transform: scale(1);
  transform-origin: center;
}

```

动画启动时间是鼠标移入，border 上变化的是颜色变淡和大小变小，透明度也逐渐变成 0。

```
button:hover::before {
  transition: all 0.75s ease-out;
  border: 1px solid#e6f7ff;
  transform: scale(1.25);
  opacity: 0;
}

```

⚠️ transition 和 transform 是放在`hover`状态下的伪元素，目的是让动画瞬间回到初始状态。

## 闪光特效

### 效果图

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

### 原理和代码

实现上依然是借助伪元素，闪光特效更多注重的是配色，动画方面实现的核心是利用`rotate`来实现「倾斜」的效果，利用`translate3d`来实现「闪动」的效果。

```
button {
  outline: none;
  border: none;
  z-index: 1;
  position: relative;
  color: white;
  background: #262626;
  padding: 0.5em 1em;
  overflow: hidden;
  --shine-width: 1.25em;
}

button::after {
  content: "";
  z-index: -1;
  position: absolute;
  background: #595959;
  /* 核心代码：位置一步步调整 */
  top: -50%;
  left: 0%;
  bottom: -50%;
  width: 1.25em;
  transform: translate3d(-200%, 0, 0) rotate(35deg);
  /*  */
}

button:hover {
  cursor: pointer;
}

button:hover::after {
  transition: transform 0.5s ease-in-out;
  transform: translate3d(500%, 0, 0) rotate(35deg);
}
web前端开发学习Q-q-u-n： 784783012 ，分享开发工具，零基础，进阶视频教程，希望新手少走弯路
```

⚠️`translate3d`除了避免重绘回流，还能启用 GPU 加速，性能更高。但之前为了方便讲述，一般使用的是`translate`属性。

## 气泡特效

### 效果图

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

### 原理和代码

首先，还是禁用 button 元素的默认样式，并且调整一下配色：

```
button {
  outline: none;
  border: none;
  cursor: pointer;
  color: white;
  position: relative;
  padding: 0.5em 1em;
  background-color: #40a9ff;
}

```

由于 button 的伪元素层级是覆盖 button 的，所以要设置 `z-index` 属性，防止伪元素遮盖显示。毕竟只想要背景色的遮盖，字体不需要遮盖。在上面的样式中添加：

```
button {
  z-index: 1;
  overflow: hidden;
}

```

最后处理的是伪元素的变化效果。**特效是从中心向四周蔓延**，所以应该让其居中。

对于大小变化，还是利用`scale`属性。

因为是圆形，所以将`border-radius`设置为 50%即可。

```
button::before {
  z-index: -1;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background-color: #9254de;
  transform-origin: center;
  transform: translate3d(-50%, -50%, 0) scale(0, 0);
  transition: transform 0.45s ease-in-out;
}

button:hover::before {
  transform: translate3d(-50%, -50%, 0) scale(15, 15);
}

```

### 换个方向？

示例代码中的气泡特效是从中间向四周扩散，如果想要从左上角向右下角扩散呢？例如下图所示：

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

处理过程很简单，**只需要改变一下气泡的初始位置即可**。

```
button::before {
  z-index: -1;
  content: "";
  position: absolute;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background-color: #9254de;
  /* 变化位置的代码 */
  top: 0;
  left: 0;
  transform-origin: center;
  transform: scale3d(0, 0, 0);
  transition: transform 0.45s ease-in-out;
  /* *********** */
}

button:hover::before {
  transform: scale3d(15, 15, 15);
}
web前端开发学习Q-q-u-n： 784783012 ，分享开发工具，零基础，进阶视频教程，希望新手少走弯路
```

ITPub博客

web前端动画专题（3）：撩人的按钮特效

最新文章