CSS动画效果

/* // 点击效果 */
.waves {
	position: relative;
	overflow: hidden;
	-webkit-tap-highlight-color:transparent;
}
.waves:after {
	content: "";
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	pointer-events: none;
	background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
	background-repeat: no-repeat;
	background-position: 50%;
	transform: scale(10, 10);
	opacity: 0;
	transition: transform .3s, opacity .5s ease-out;
}

.waves.dark-waves:after{
	background-image: radial-gradient(circle, #333 10%, transparent 10.01%);
}

.waves:active:after {
	transform: scale(0, 0);
	opacity: .3;
	transition: 0s;
}