CSS实现按钮点击水波纹效果

发表于 | 分类于 |

我们经常会看到很多网站为按钮添加点击效果来提升用户体验，我们就简单的实现以下水波纹效果。

实现水波纹效果主要使用来 css after 伪类和 css3 中的 transform 和 transition 属性。

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
29
30
31
32
<style>
	.the-btn {
		color: #555;
		border: none;
		outline: none;
		cursor: pointer;
		font-size: 12px;
		overflow: hidden;
		position: relative;
		border-radius: 2px;
		background: #f5f5f5;
	}
	.the-btn::after {
		top: 0;
		left: 0;
		opacity: 0;
		width: 100%;
		content: "";
		opacity: 0.3;
		height: 100%;
		position: absolute;
		transform: scale(10);
		transition: transform 0.3s, opacity 0.5s;
		background: radial-gradient(circle, #a1a1a1 10%, transparent 10.01%);
	}
	.the-btn:active::after {
		opacity: 0.3;
		transition: 0s;
		transform: scale(0, 0);
	}
</style>
<button class="the-btn">the btn</button>

点击上面的按钮，就能看到效果了，但是中心点一直在中间。我们能不能让中心点在点击处呢，当然是可以的，不过这样需要使用 js 来做一些计算了，参考 demo：https://codepen.io/jh3y/pen/EKGXEY

[越努力，越幸运！]