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

特效一览

滑箱：

果冻：

脉冲：

闪光：

气泡：

滑箱特效

效果图

原理

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

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

代码实现

html：

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

css：

button {
  outline: none;
  border: none;
  z-index