CSS部分：
body{
background-color: rgb(62, 178, 224);
}
.content{
display: flex;
justify-content: center;
align-items:center;
width: 100px; /*width和height必须设置，不然就不是从中间向外扩散了*/
height: 100px;
margin: 175px auto;
}
.wave{
display: flex;
justify-content: center;
align-items:center;
border: white 1px solid;
}
.wave1 {
animation:wave1 1.5s linear infinite;
}
.wave2{
animation:wave2 1.5s linear infinite;
}
.wave3{
animation:wave3 1.5s linear infinite;
}
@keyframes wave3{
from{width: 2px;height: 2px;border-radius: 1px;}
to{width: 20px;height: 20px;border-radius: 10px;}
}
@keyframes wave2{
from{width: 20px;height: 20px;border-radius: 10px;}
to{width: 50px;height: 50px;border-radius: 25px;}
}
@keyframes wave1{
from{width: 50px;height: 50px;border-radius: 25px;}
to{width: 100px;height: 100px;border-radius: 50px;}
}html部分：
<body>
<div class="content">
<div class="wave wave1">
<div class="wave wave2">
<div class="wave wave3"></div>
</div>
</div>
</div>
</body>
