纯CSS实现涟漪按钮效果

涟漪按钮:顾名思义,就是点击按钮的时候,有一个圆圈扩散开来,就像水面的涟漪。效果如下:

看上去非常简单的效果,就是点击的时候一个圆圈从小变大,于此同时透明度从半透明变为透明。
常见的方式是使用javascript

  1. 监听鼠标的点击事件,当点击按钮的时候,追加一个圆形的dom
  2. 改变dom的大小,直至完全覆盖按钮
  3. 移除按钮

但是这个方法,有几个缺点:

  1. 首先就是你要给按钮添加一个事件
  2. 然后添加,移除dom会造成页面的重绘
  3. 绘制的时候会要进行运算

所以最终参考利用:activebacgroundscale实现了一个纯css的涟漪按钮效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.button-ripple() {
overflow: hidden;
position: relative;
transition: background-color .3s linear, border .3s linear;

&:after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
background-image: radial-gradient(circle, #000 10%, rgba(0, 0, 0, 0) 10.01%);
background-repeat: no-repeat;
background-position: 50%;
transform: scale(10);
opacity: 0;
transition: transform .5s, opacity 1s;
}

&:active:after {
transform: scale(0);
opacity: .2;
transition: 0s;
}
}

这是一个lessmixin,在需要涟漪效果的地方直接使用即可,如:
1
2
3
.ripple{
.button-ripple();
}

此方法的原理是:
首先在按钮的正中间利用:after伪元素画了一个遮罩(此遮罩刚好盖住整个按钮),当点击按钮的时候将遮罩缩小到0%,松开鼠标时,还原100%大小,并将透明度缩小到0。
Demo地址