CSS Orbit

HTML
<div class="container"> <div class="sun"></div> <div class="orbit earth-orbit"> <div class="globe earth"> <div class="orbit moon-orbit"> <div class="globe moon"></div> </div> </div> </div> </div>
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; } }
JAVASCRIPT
Expand for more options Login