地图节点

地图节点闪烁

by yu lemon

HTML

<span class="map-site-marker"> 
	<span class="circle"></span> 
	<span class="pulse animated"></span> 
</span>

CSS

.map-site-marker {
	display: inline-block;
	width: 30px;
	height: 30px;
	position: relative;
	border-radius: 50%;
	vertical-align: middle;
}
.map-site-marker .circle {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -4px;
	margin-top: -4px; 
	width: 8px;
	height: 8px; 
	background-color: #77EDFF; 
	border-radius: 4px;
}
.map-site-marker .pulse {
	display: block;
	width: 100%; 
	height: 100%;
	background-color: #77EDFF; 
	border-radius: 50%;
	opacity: 0;
	filter: alpha(opacity= 0);
}
@keyframes map-pulse { 
	0% {
		opacity: .85; 
		filter: alpha(opacity= 85);
		transform: scale(0); 
	} 
	100% {
		opacity: 0;
		filter: alpha(opacity= 0);
		transform: scale(1); 
	}
}
.map-site-marker .pulse.animated {
	animation: map-pulse 2s ease-out 1.5s infinite
}