CSS
body {
position: relative;
height: 100vh;
background-image: radial-gradient( rgba(255, 220, 178, 0.7), rgba(145, 64, 0, 0.7));
}
.orbit {
position: absolute;
z-index: 10;
width: 100px;
height: 200px;
left: 50%;
top: 50%;
margin: -100px -50px;
border: 4px solid rgba(137, 57, 0, 0.5);
border-radius: 50%;
background-image: radial-gradient( rgba(255, 173, 75, 0.4), rgba(145, 64, 0, 0.4));
}
.rot45 {
z-index: 6;
transform: rotate(45deg);
}
.rot90 {
z-index: 4;
transform: rotate(90deg);
}
.rot135 {
z-index: 6;
transform: rotate(135deg);
}
.prot {
position: relative;
width: 10px;
height: 10px;
margin: 95px 45px;
border-radius: 50%;
background-color: rgb(59, 32, 0);
background-color: rgba(59, 32, 0, 0.7);
animation: pulse 5s infinite;
}
.elec {
position: absolute;
top: 96px;
left: -6px;
}
.elec:after {
content: '';
display: block;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: rgba(59, 32, 0, .7);
}
.sp1 { animation: lr 10s infinite; }
.sp1:after { animation: ud 10s infinite; }
.sp2 { animation: lr 6s infinite; }
.sp2:after { animation: ud 6s infinite; }
.sp3 { animation: lr 16s infinite; }
.sp3:after { animation: ud 16s infinite; }
.sp4 { animation: lr 5s infinite; }
.sp4:after { animation: ud 5s infinite; }
@keyframes pulse {
0%,
100% {
background-color: rgba(59, 32, 0, 0.7);
}
50% {
background-color: rgba(204, 132, 0, 0.8);
transform: scale(2);
}
}
@keyframes lr {
0% {
animation-timing-function: ease-in;
transform: translateX(0px);
}
25% {
animation-timing-function: ease-out;
transform: translateX(51px);
}
50% {
animation-timing-function: ease-in;
transform: translateX(104px);
}
75% {
animation-timing-function: ease-out;
transform: translateX(51px);
}
100% {
transform: translateX(0px);
}
}
@keyframes ud {
0% {
animation-timing-function: ease-out;
transform: translateY(0px);
}
25% {
animation-timing-function: ease-in;
transform: translateY(-102px);
}
50% {
animation-timing-function: ease-out;
transform: translateY(0px);
}
75% {
animation-timing-function: ease-in;
transform: translateY(102px);
}
100% {
transform: translateY(0px);
}
}
