SOURCE

console 命令行工具 X clear

                    
>
console
<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>波纹</title>
</head>

<body>
	<div class="container">
		<div class="point" style="top:196px; left: 150px;">
			<div class="ripple-base ripple-1"></div>
			<div class="ripple-base ripple-2"></div>
			<!-- <div class="ripple-base ripple-3"></div> -->
		</div>
	</div>
</body>

</html>
	.container {
	    width: 1200px;
	    margin: auto;
	    position: relative;
	}
	
	.point {
	    width: 10px;
	    height: 10px;
	    display: block;
	    background-color: #FF0000;
	    border-radius: 50%;
	    position: absolute;
	}
	
	.ripple-1 {
	    animation: ripple 2500ms 225ms infinite;
	}
	
	.ripple-2 {
	    animation: ripple 2500ms 1300ms infinite;
	}
	/* .ripple-3 {
				animation: ripple 4500ms 3575ms infinite;
			} */
	
	.ripple-base {
	    width: 120px;
	    height: 120px;
	    border: 2px solid #00cdec;
	    border-radius: 50%;
	    transform: scale(0.01);
	    position: absolute;
	    left: -57px;
	    top: -57px;
	}
	
	@keyframes ripple {
	    100% {
	        opacity: 0;
	        transform: scale(1);
	    }
	}