【CSS】波纹效果

<div id="container">	<div class='circle circle--1'></div>	<div class='circle circle--2'></div>	<div class='circle circle--3'></div>	<div class='circle circle--4'></div>	<div class='circle circle--5'></div>	<div class='circle circle--6'></div></div>
<style>#container {	width: 500px;	height: 500px;	position: relative;	margin: 100px auto 0;	transition: opacity 1s;}
.circle {	position: absolute;	top: 50%;	left: 50%;	transform: translate(-50%, -50%);	border-radius: 50%;	animation: pulse 3s infinite ease-in-out;	background: #487ad3;}
.circle--1 {	opacity: 1;	animation-delay: 0.12s;}
.circle--2 {	opacity: 0.5;	animation-delay: 0.24s;}
.circle--3 {	opacity: 0.3333;	animation-delay: 0.36s;}
.circle--4 {	opacity: 0.25;	animation-delay: 0.48s;}
.circle--5 {	opacity: 0.2;	animation-delay: 0.6s;}
.circle--6 {	opacity: 0.1666;	animation-delay: 0.72s;}
.circle--1 {	width: 10%;	height: 10%;}
.circle--2 {	width: 20%;	height: 20%;}
.circle--3 {	width: 30%;	height: 30%;}
.circle--4 {	width: 40%;	height: 40%;}
.circle--5 {	width: 50%;	height: 50%;}
.circle--6 {	width: 60%;	height: 60%;}


@keyframes pulse {	0% {		transform: translate(-50%, -50%) scale(1);	}	25% {		transform: translate(-50%, -50%) scale(1.3);	}	50% {		transform: translate(-50%, -50%) scale(0.70);	}	75% {		transform: translate(-50%, -50%) scale(1);	}}


section {	width: 500px;	height: 40px;	margin: 10px auto 0;	display: flex;	justify-content: space-around;}
section > div {	width: 100px;	height: 100%;	background-image: linear-gradient( 135deg, #52E5E7 10%, #130CB7 100%);	text-align: center;	line-height: 40px;	color: #fff;	font-weight: 600;	font-size: 18px;	letter-spacing: 4px;	border-radius: 10px;}</style>