css3实现雷达扩散效果

主要利用关键帧配合animation属性来实现

html部分：

	<div class="avatar"></div>
	<div class="inner"></div>
	<div class="inner container"></div>
	<div class="inner outter"></div>

css部分:

div.inner {
	width: 90px;
	height: 90px;
	background: #FF5E5E;
	border-radius: 50%;
	position: fixed;
	left: 50%;
	margin-left: -45px;
	margin-top: 152px;
	z-index: 10;
	animation-duration: 2.4s;
	z-index: 10;
	-webkit-animation-name: state1;
	animation-name: state1;
	-webkit-animation-timing-function: linear;
	animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	opacity: 0;
}

@keyframes state1 {
	0% {
		opacity: .5;
		-webkit-transform: scale(1);
		transform: scale(1);
	}

	100% {
		opacity: 0;
		-webkit-transform: scale(4.5);
		transform: scale(4.5);
	}
}

.avatar {
	position: fixed;
	left: 50%;
	margin-left: -28px;
	margin-top: 172px;
	border-radius: 50%;
	width: 56px;
	height: 56px;
	background-color: #fff;
	z-index: 11;
}
.container {
	animation-delay: .8s;
}
.outter {
	animation-delay: 1.5s;
}

效果图:
css3实现雷达扩散效果