.p5-active {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	color: #ccc;
	.p5-active-ripple {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;

		background-image: radial-gradient(circle, currentColor 10%, transparent 10.1%);
		transform: scale(20, 20);
		transform-origin: center;
		opacity: 0;
		transition: transform 0.3s ease-out, opacity 0.5s ease-out;
		pointer-events: none;
	}
	// active下应该是 隐藏状态 当active去掉恢复原来的时候 才是动画进行时
	&:active {
		.p5-active-ripple {
			// &:after {
			transform: scale(0, 0);
			opacity: 0.3;
			transition: 0s;
		}
	}
}