一个css的发光点

675 阅读1分钟

用css实现的一个发光点,还挺好看的。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="pulse-icon">
			
		</div>
	</body>
	<style type="text/css">
	.pulse-icon {
	  display: inline-block;
	  width: 15px;
	  height: 15px;
	  border-radius: 100%;
	  background-color: #2f8;
	  position: relative;
	  box-shadow: 1px 1px 8px 0 rgba(0, 0, 0, 0.75);
	}
	
	.pulse-icon:after {
	  content: "";
	  box-shadow: 0 0 6px 2px #2f8;
	  animation: pulsate 1s ease-out;
	  animation-iteration-count: infinite;
	  animation-delay: 1.1s;
	  -webkit-border-radius: 100%;
	  border-radius: 100%;
	  height: 300%;
	  width: 300%;
	  animation: pulsate 2s infinite;
	  position: absolute;
	  margin: -100% 0 0 -100%;
	}
		@keyframes pulsate {
		  0% {
		    transform: scale(0.1, 0.1);
		    opacity: 0;
		    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
		    filter: alpha(opacity=0);
		  }
		
		  50% {
		    opacity: 1;
		    -ms-filter: none;
		    filter: none;
		  }
		
		  100% {
		    transform: scale(1.2, 1.2);
		    opacity: 0;
		    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
		    filter: alpha(opacity=0);
		  }
		}
	</style>
</html>