SCSS
html, body {
height: 100%;
overflow: hidden;
}
body {
background: linear-gradient(to left, #141E30 , #243B55);
transform: scale(1.2, 1.2);
> div {
border-radius: 50%;
border: 1px solid #fff;
transform-style: preserve-3d;
transform: rotateX(80deg) rotateY(20deg);
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
&:first-of-type {
&:after {
content: "";
position: absolute;
height: 40px;
width: 40px;
background: #fff;
border-radius: 50%;
transform: rotateX(-80deg) rotateY(0);
box-shadow: 0 0 25px #fff;
animation: nucleus_ 2s infinite linear;
left: 50%;
top: 50%;
margin-top: -20px;
margin-left: -20px;
}
}
&:nth-of-type(2) {
transform: rotateX(-80deg) rotateY(20deg);
> div,
> div:after {
animation-delay: -.5s;
}
}
&:nth-of-type(3) {
transform: rotateX(-70deg) rotateY(60deg);
> div,
> div:after {
animation-delay: -1s;
}
}
&:nth-of-type(4) {
transform: rotateX(70deg) rotateY(60deg);
> div,
> div:after {
animation-delay: -1.5s;
}
}
> div {
width: 200px;
height: 200px;
position: relative;
transform-style: preserve-3d;
animation: trail_ 2s infinite linear;
&:after {
content: "";
position: absolute;
top: -5px;
box-shadow: 0 0 12px #fff;
left: 50%;
margin-left: -5px;
width: 5px;
height: 5px;
border-radius: 50%;
background-color: #fff;
animation: particle_ 2s infinite linear;
}
}
}
}
@keyframes trail_ {
from {
transform: rotateZ(0deg);
} to {
transform: rotateZ(360deg);
}
}
@keyframes particle_ {
from {
transform: rotateX(90deg) rotateY(0deg);
} to {
transform: rotateX(90deg) rotateY(-360deg);
}
}
@keyframes nucleus_ {
0%, 100% {
box-shadow: 0 0 0 transparent;
} 50% {
box-shadow: 0 0 25px #fff;
}
}
1 Response