CSS
body {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
overflow: hidden;
background-color: #444;
}
.wrapper {
width: 300px;
height: 300px;
}
@keyframes rotation {
0% {
border-radius: 50%;
transform: rotate(0deg) scale(0.2);
}
40%, 50% {
border-radius: 0;
transform: rotate(-45deg) scale(1.2);
}
100% {
border-radius: 50%;
transform: rotate(-135deg) scale(0.2);
}
}
@keyframes slide-in {
0%, 30% {
transform: translateY(110%);
}
50%, 80% {
transform: translateY(0);
}
90%, 100% {
transform: translateY(-110%);
}
}
.square {
position: relative;
display: flex;
flex-basis: 50px;
justify-content: center;
align-items: center;
}
.square div {
position: relative;
width: 80px;
height: 80px;
overflow: hidden;
border-radius: 50%;
transform: rotate(0deg) scale(0.2);
animation: rotation 4s infinite;
}
.square div::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
display: block;
transform: translateY(110%);
animation: slide-in 4s infinite;
}
.square-1 div {
background-color: #3498db;
}
.square-1 div::before {
background-color: #2ecc71;
}
.square-2 div {
background-color: #2ecc71;
}
.square-2 div::before {
background-color: #9b59b6;
}
.square-3 div {
background-color: #9b59b6;
}
.square-3 div::before {
background-color: #e67e22;
}
.square-4 div {
background-color: #e67e22;
}
.square-4 div::before {
background-color: #3498db;
}
