css动画，animation动画，圆形扩散特效，水波

     

css 部分

<style>
.c-green{color: #009933;}
.c-red{color: #F22E00;}

.bg-green{background:#0dbf0d;}
.bg-red{background:#F22E00;}

.spread-dot-box{
	position: relative;
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-right: 3px;
	vertical-align: 2px;
	border-radius: 50%;
}
.spread-dot span {
	position: absolute;
	top: 0;
	left: 0;
	box-sizing: border-box;
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	-webkit-animation: sDot 1.2s ease-in-out infinite;
	animation: sDot 1.2s ease-in-out infinite;
}

@-webkit-keyframes sDot {
	0% {
		opacity: .8;
		transform: scale(.8)
	}
	to {
		opacity: 0;
		transform: scale(3)
	}
}

@keyframes sDot {
	0% {
		opacity: .8;
		transform: scale(.8)
	}
	to {
		opacity: 0;
		transform: scale(3)
	}
}
</style>

html 部分

<div style="margin:0 auto;width:1200px;">
	<span class="c-green"><span class="spread-dot spread-dot-box bg-green"><span class="bg-green"></span></span> 正常</span>
	<div style="height:30px;"></div>
	<span class="c-red"><span class="spread-dot spread-dot-box bg-red"><span class="bg-red"></span></span> 异常</span>
</div>