大圆向外扩大的同时小圆向里缩小然后回归原位置，循环此动画
<style>
*{
margin:0px;
padding:0px;
}
.content {
width:400px;
height:500px;
background-color:#343434;
padding-top:50px;
}
.circle1 {
width:200px
height:200px;
border:8px solid #999999;
margin:0 auto;
border-radius:50%;
background-color:#343434;
display:flex;
jusitfy-content:center;
align-items:center;
animation-name:circle1;
animation-duration:2s;
animation-direction:alternate;
animation-iteration-count:infinite;
}
.circle {
width:120px;
height:120px;
border:15px solid #ffffff;
border-radius:50%;
background-color:#343434;
animation-name:circle2;
animation-duration:2s;
animation-direction:alternate;
animation-iteration-count:infinite;
}
p {
font-size:50px;
font-family:sans-serif;
color:#ffffff;
text-align:center;
margin-top:80px;
}
@keyframes circle1 {
from {
transform:scale(1);
}
to {
transform:scale(1.05);
}
}
@keyframes circle2 {
from {
transform:scale(1);
}
to {
transform:scale(0.9);
}
}
</style>
<!-- html -->
<body>
<div class="content">
<div class="circle1">
<div class="circle2"></div>
</div>
<p>HI!</p>
</div>
</body>
