使用box-shadow 实现水波、音波的效果

用到的工具

animation

box-shadow

html:

<div class="watersource">

</div>

css:

.watersource{
	background-color:red;
	width:2px;
	height:2px;
	margin-left:200px;
	margin-top:100px;
	border-radius:100%;
	background-color:0 0 0 0 rgba(255,20,150,.5);
	-webkit-animation: ripple 1s linear 0s infinite normal both;
   -o-animation: ripple 1s linear 0s infinite normal both;
   animation: ripple 500ms linear 0s infinite normal both;
}

@keyframes ripple{
	0% {
		box-shadow:0 0 0 0 rgba(255,20,150,.5),0 0 0 10px rgba(255,20,50,.4),0 0 0 20px rgba(255,20,150,.3),0 0 0 30px rgba(255,20,150,.2),0 0 0 40px rgba(255,20,150,.1);
	}
	100% {
		box-shadow:0 0 0 10px rgba(255,20,150,.5),0 0 0 20px rgba(255,20,150,.4),0 0 0 30px rgba(255,20,150,.3),0 0 0 40px rgba(255,20,150,.2),0 0 0 50px rgba(255,20,150,.1);
	}

}

@keyframes test{
	from{
		width:2px;
		height:2px;
	}
	to{
		width:200px;
		height:200px;
	}
}

点击查看效果