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实现雷达扩散效果