css3 实心圆由中心向外放大扩散 变透明动画 模拟点击效果 水滴纹效果 放大缩小动画

网上找效果是这样 ，
https://file.zcool.cn/community/flash/11fdaf57764c5f0000018c1b5d5a4e.swf?Expires=1562819038&OSSAccessKeyId=lwQTEmwHzzSWSkqd&Signature=7v1SFd%2BJSRkWHReEcQ8pBXBWPYs%3D

以下是自己做的效果 和这个差不多

html

<div class="anmipic">
	<div class="container">
		<span></span>
		<span></span>
	</div>
	<span class="span2"></span>
</div>

css

.anmipic{
	width:1.3rem;
	height:1.7rem;
	position:absolute;
	top:1.2rem;
	right:1.2rem;	
	-webkit-animation: myMove 1s linear infinite;
	display:none;
	z-index:99;
}
.anmipic .container {
    position: relative!important;
    width: 1.3rem;
    height: 1.3rem;
}
.anmipic .container span {
    position: absolute;
	width: 1.2rem;
	height: 1.2rem;
	left: 0;
	bottom: 0;
	background: #20A0FF;
	border-radius: 50%;
	-webkit-animation: living 1s linear infinite;
	z-index: 1;
}
.anmipic .container span:nth-child(2) {
	width: .9rem;
	height: .9rem;
	position:absolute;
	left:15%;
	top:19%;
	-webkit-transform:translate(-50%, -50%);
	-moz-transform:translate(-50%, -50%);
	transform:translate(-50%, -50%);
    -webkit-animation-delay: .1s;
}
.anmipic .span2{
	width:1.15rem;
	min-height:1.5rem;
	display:inline-block;
	background:url('/mobile/static/images/arrow1.png') no-repeat center top;
	background-size:85%;
	position:absolute;
	top:.7rem;
	left:.2rem;
	z-index:2;
}
@keyframes living {
	0%{
		transform: scale(.3);
		opacity: .7;
	}
	25%{
		transform: scale(.5);
		opacity: 0.7;
	}
	50%{
		transform: scale(1);
		opacity: 0.4;
	}
	100%{
		transform: scale(1.5);
		opacity: 0.1;
	}
}
@keyframes myMove {
	0% {
		top: 1rem;
	}
	50% {
		top: 1.2rem;
	}
	100% {
		top: 1rem;
	}
}