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>
</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-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);
}
}