SCSS
.box {
background: white;
filter: contrast(40);
position: absolute;
top: 50%;
left: 50%;
margin-left: -200px;
margin-top: -250px;
width: 400px;
height: 400px;
z-index: 1;
animation: rotate 6s infinite linear;
}
.circle {
filter: blur(15px);
position: absolute;
margin: 100px;
width: 200px;
height: 200px;
border-radius: 100px;
background-color: black;
z-index: 2;
}
.orbit {
filter: blur(15px);
z-index: 3;
position: absolute;
width: 50px;
height: 50px;
border-radius: 40px;
background-color: red;
transform: translate(175px, 55px);
animation: roll 2s infinite linear;
}
.orbit:nth-child(2) {
transform: translate(260px, 90px);
animation: roll2 2s infinite linear;
animation-delay: -0.25s;
}
.orbit:nth-child(3) {
transform:translate(295px, 175px);
animation: roll3 2s infinite linear;
animation-delay: -0.5s;
}
.orbit:nth-child(4) {
transform:translate(260px, 260px);
animation: roll4 2s infinite linear;
animation-delay: -0.75s;
}
@keyframes roll {
49% {
z-index: 3;
}
50% {
transform: translate(175px, 295px);
z-index: 1;
}
99% {
z-index: 1;
}
100% {
z-index: 3;
}
}
@keyframes roll2 {
49% {
z-index: 3;
}
50% {
transform:translate(90px, 260px);
z-index: 1;
}
99% {
z-index: 1;
}
100% {
z-index: 3;
}
}
@keyframes roll3 {
49% {
z-index: 3;
}
50% {
transform:translate(55px, 175px);
z-index: 1;
}
99% {
z-index: 1;
}
100% {
z-index: 3;
}
}
@keyframes roll4 {
49% {
z-index: 3;
}
50% {
transform:translate(90px, 90px);
z-index: 1;
}
99% {
z-index: 1;
}
100% {
z-index: 3;
}
}
@keyframes rotate {
100% {
transform: rotate(360deg);
}
}
