jQuery按钮点击波纹动画效果

按钮点击时的波纹动画，能给交互加不少分。jQuery 配合 CSS3 做这事儿，挺合适的。点一下，波纹从点击位置扩散开来，视觉反馈立马就有。代码也不复杂，样式用::before伪元素搞定，动画过渡流畅，响应也快。想在自己项目里加点小动效？这个源码还蛮值得一看。

波纹效果其实早在 Android Material Design 里就火了，现在放在网页按钮上，一样炫酷。你只要准备一个有overflow: hidden的按钮容器，再写点 jQuery 监听click事件，计算下点击位置，就能实现了。

比如按钮的 HTML 结构就一句：

<button id="ripple-effect">点击我</button>

CSS 控制它的动画，核心样式是这样的：

#ripple-effect {
  position: relative;
  overflow: hidden;
}
#ripple-effect::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  opacity: 0;
  transform: scale(0);
  transition: all 0.5s;
}

jQuery 部分就是监听点击，把::before伪元素“激活”一下：

$(document).ready(function() {
  $('#ripple-effect').on('click', function(e) {
    var $this = $(this),
        offset = $this.offset(),
        x = e.pageX - offset.left,
        y = e.pageY - offset.top;

$this.css('--x', x + 'px');
    $this.css('--y', y + 'px');
$this.addClass('ripple');
    setTimeout(function() {
      $this.removeClass('ripple');
    }, 500);
  });
});

源码打包在texiao1028_1560680964里，直接打开index.html就能看到效果。想换颜色、大小、扩散速度？改改 CSS 就行。

如果你刚好想让页面的按钮“动”起来，又不想写太多代码，用这个还挺省事儿。别忘了还可以看看类似的：html5 波纹动画、CSS3 波纹合集、或者ripplet.js这种类库方式。