地震波

2015/12/14 40164
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.bigcircle{
    width:35px;
    height:35px;
    border-radius:35px;
    border:1px solid rgb(214,228,251);
	-webkit-animation:pulse 3.5s ease-in-out infinite;
	animation:pulse 3.5s ease-in-out infinite;
}
.bigcircle .circle{
	position:relative;
	left:4px;
	top:4px;
    width:23px;
    height:23px;
    border-radius:23px;
    border:2px solid rgb(214,228,251);
	-webkit-animation:pulse 3.5s ease-in-out infinite;
	animation:pulse 3.5s ease-in-out infinite;
}
.bigcircle .content{
	position:relative;
	left:3px;
	top:3px;
    width:13px;
    height:13px;
    border-radius:13px;
    border:2.5px solid rgb(110,155,239);
	-webkit-animation:pulse 3.5s ease-in-out infinite;
	animation:pulse 3.5s ease-in-out infinite;
}
@-webkit-keyframes pulse{
	0%{-webkit-transform:scale(1)}
	25%{-webkit-transform:scale(1.1)}
	50%{-webkit-transform:scale(1)}
	75%{-webkit-transform:scale(1.1)}
	100%{-webkit-transform:scale(1)}
}
@-moz-keyframes pulse{
	0%{-moz-transform:scale(1)}
	25%{-moz-transform:scale(1.1)}
	50%{-moz-transform:scale(1)}
	75%{-moz-transform:scale(1.1)}
	100%{-moz-transform:scale(1)}
}
@-o-keyframes pulse{
	0%{-o-transform:scale(1)}
	25%{-o-transform:scale(1.1)}
	50%{-o-transform:scale(1)}
	75%{-o-transform:scale(1.1)}
	100%{-o-transform:scale(1)}
}
@-ms-keyframes pulse{
	0%{-ms-transform:scale(1)}
	25%{-ms-transform:scale(1.1)}
	50%{-ms-transform:scale(1)}
	75%{-ms-transform:scale(1.1)}
	100%{-ms-transform:scale(1)}
}
@keyframes pulse{
	0%{transform:scale(1)}
	25%{transform:scale(1.1)}
	50%{transform:scale(1)}
	75%{transform:scale(1.1)}
	100%{transform:scale(1)}
}

.arrow{
	position: absolute;
	display: block;
	width: 0;
	height: 0;
	border-color: transparent;
	border-style: solid;
	border-width: 20px;
	
    top:45%;
	  margin-top:-8px;
	  overflow:hidden;
	  line-height:0;
	  font-size:0;
	  border-bottom-color:#FFF;
	  border-top-color:#FFF;
	  border-right-color:#edf1f2;
	  border-left:none;
}

.left{
	position: absolute;
	display: block;
	width: 0;
	height: 0;
	border-color: transparent;
	border-style: solid;
	border-width: 20px;
	
    top:45%;
	  margin-top:-8px;
	  left:2px;
	  overflow:hidden;
	  line-height:0;
	  font-size:0;
	  border-bottom-color:#FFF;
	  border-top-color:#FFF;
	  border-right-color:#edf1f2;
	  border-left:none;
}

</style>
</head>
<body>
	<div class="bigcircle">
		<div class="circle">
		<div class="content">
		</div>
		</div>
	</div>
</body>
</html>
代码片段
