.common {
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
border: 1px solid red;
}
.one {
-moz-animation: sunny 10s linear infinite;
-ms-animation: sunny 10s linear infinite;
-webkit-animation: sunny 10s linear infinite;
animation: sunny 10s linear infinite;
width: 200px;
height: 200px;
box-shadow: 0 0 20px 5px blue;
}
.two {
width: 80%;
height: 80%;
box-shadow: 0 0 20px 5px blue;
}
.three {
width: 60%;
height: 60%;
box-shadow: 0 0 20px 8px blue;
}
.four {
width: 40%;
height: 40%;
box-shadow: 0 0 20px 5px blue;
}
.five {
width: 20%;
height: 20%;
background-color: red;
box-shadow: 0 0 20px 5px blue;
}
@-webkit-keyframes sunny {
0% {
width: 200px;
height: 200px;
}
50% {
width: 100px;
height: 100px;
}
100%{
width: 200px;
height: 200px;
}
}
@keyframes sunny {
0% {
width: 200px;
height: 200px;
}
50% {
width: 100px;
height: 100px;
}
100%{
width: 200px;
height: 200px;
}
}
试试?