CSS
body {
background-color: #000;
}
.container {
position: absolute;
top: 50%;
left: 50%;
margin-top: -200px;
margin-left: -200px;
width: 400px;
height: 400px;
-webkit-filter: contrast(40);
background-color: #000;
}
.orb {
background-color: #000;
position: absolute;
content: "";
width: 40px;
height: 40px;
border-radius: 20px;
background-color: red;
left: 180px;
top: 180px;
-webkit-filter: blur(15px);
-webkit-transform: translateY(-100px);
}
.orb:nth-of-type(1) {
width: 50px;
height: 50px;
border-radius: 25px;
-webkit-transform: translateY(-110px);
}
.orb:nth-of-type(2) {
-webkit-animation: spin 4s infinite ease-in-out;
-webkit-animation-delay: 0.1s;
}
.orb:nth-of-type(3) {
-webkit-animation: spin 4s infinite ease-in-out;
-webkit-animation-delay: 0.3s;
}
.orb:nth-of-type(4) {
-webkit-animation: spin 4s infinite ease-in-out;
-webkit-animation-delay: 0.5s;
}
.orb:nth-of-type(5) {
-webkit-animation: spin 4s infinite ease-in-out;
-webkit-animation-delay: 0.7s;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg) translateY(-100px) rotate(0deg);
}
70% {
-webkit-transform: rotate(360deg) translateY(-100px) rotate(-360deg);
}
}
