本文来自「心谭博客」的《动画设计·按钮特效》,更多文章放在了Github

欢迎交流和Star

特效一览

滑箱

果冻

脉冲

闪光

气泡

滑箱特效

效果图

原理

因为 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);}

果冻特效

效果图

原理和代码

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

button {  z-index: 1;  color: white;  background: #40a9ff;  outline: none;  border: none;  padding: 0.5em 1em;}
button:hover {  cursor: pointer;  animation: jelly 0.5s;}

下面开始编写 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);  }}

脉冲特效

效果图

原理和代码

首先,还是去掉 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状态下的伪元素,目的是让动画瞬间回到初始状态。

闪光特效

效果图

原理和代码

实现上依然是借助伪元素,闪光特效更多注重的是配色,动画方面实现的核心是利用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);}

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

气泡特效

效果图

原理和代码

首先,还是禁用 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);}

换个方向?

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

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

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);}