SCSS
body {
background-color: #222;
height: 100vh;
}
.container {
height: 400px;
left: calc(50% - 200px);
position: absolute;
top: calc(50% - 200px);
width: 400px;
.sun {
background-color: yellow;
border-radius: 50%;
box-shadow: 0 0 30px white;
height: 100px;
left: 150px;
position: absolute;
top: 150px;
width: 100px;
animation: glowing 2s linear infinite;
}
.orbit {
border: solid;
border-color: white transparent transparent transparent;
border-radius: 50%;
border-width: 1px 1px 0 0;
box-sizing: border-box;
position: absolute;
transform: rotate(0deg);
transform-origin: center;
&.earth-orbit {
animation: orbit 36.5s linear infinite;
height: 300px;
left: 50px;
top: 50px;
width: 300px;
}
&.moon-orbit {
animation: orbit 2.7s linear infinite;
height: 80px;
left: -25px;
top: -25px;
width: 80px;
}
.globe {
border-radius: 50%;
position: absolute;
&.earth {
background: aqua;
height: 30px;
right: 28px;
top: 28px;
width: 30px;
}
&.moon {
background: #d6d6d6;
height: 12px;
right: 2px;
top: 8px;
width: 12px;
}
}
}
}
@keyframes orbit {
to { transform: rotate(360deg); }
}
@keyframes glowing {
0% { box-shadow: 0 0 30px white; }
50% { box-shadow: 0 0 60px white; }
100% { box-shadow: 0 0 30px white; }
}
