html+css 实现图层水波纹效果，废话不多说，直接上代码

<span class="quote-top">
	<i>水波纹</i>
	<span class="ripple ripple-1"></span>
	<span class="ripple ripple-2"></span>
	<span class="ripple ripple-3"></span>
  </span>

<style>
	span.quote-top {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}
	span.quote-top i {
		display: inline-block;
		width: 275px;
		height: 275px;
		background-color: #76C1A4;
		color: #ffffff;
		text-align: center;
		font-size: 40px;
		line-height: 275px;
		border-radius: 50%;
		border: 10px solid #ffffff;
	}
	.ripple {
		position: absolute;
		top: 0;
		left: 0;
		display: inline-block;
		z-index: -1;
		width: 100%;
		height: 100%;
		background-color: #76C1