CSS
html, body {
background: #febebc;
}
ul {
position: absolute;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 600px;
height: 600px;
padding: 0;
background: #e25d6e;
border-radius: 50%;
list-style: none;
overflow: hidden;
}
li {
position: absolute;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
border-radius: 50%;
animation: zoom 3s infinite;
transform: scale(0);
}
li:nth-child(1) {
background: #ffb5ba;
}
li:nth-child(2) {
background: #f06966;
animation-delay: .2s;
}
li:nth-child(3) {
background: #E5446D;
animation-delay: .4s;
}
li:nth-child(4) {
background: #FF5964;
animation-delay: .6s;
}
li:nth-child(5) {
background: #FF6766;
animation-delay: .8s;
}
@keyframes zoom {
from {
transform: scale(0);
opacity: 1;
}
30% {
transform: scale(1);
}
100% {
transform: scale(1);
opacity: 0;
}
}
