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

本文来自「心谭博客」的《动画设计·按钮特效》，更多文章放在了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);
}

果冻特效

效果图