Group A P’Arin
✨ Thanawat Jantawong
<html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <style> body { background: black; width: 100vw; height: 100vh; overflow: hidden; } .earth { width: 300px; height: 300px; position: fixed; top: 0; bottom: 0; left: 0; right: 0; margin: auto; overflow: hidden; border-radius: 50%; box-shadow: 0 0 20px 20px #000 inset, 0 0 20px 2px #000; z-index: 20; } .earth:after { position: absolute; content: ""; top: 0; bottom: 0; left: 0; right: 0; box-shadow: -20px -20px 50px 2px #000 inset; border-radius: 50%; } .earth > .inside { width: 200%; height: 100%; animation: spin 30s linear infinite; background: url(https://storage.googleapis.com/gweb-uniblog-publish-prod/images/New-global-view.max-1000x1000.jpeg); background-size: cover; } @keyframes spin { to { transform: translateX(-50%); } } @keyframes move-around { form { transform: translateY(20vw); } to { transform: translateX(70vw); } } @keyframes star { 0% { transform: scale(0); box-shadow: 0 0 5px 0px rgba(255, 255, 255, 0.05); } 20% { opacity: 1; box-shadow: 0 0 5px 3px white; transform: scale(1); } 100% { box-shadow: 0 0 5px 0px white; transform: scale(0); } } .air { position: absolute; height: 1000px; transform: rotateZ(20deg) translateY(10%); z-index: 9998; } .moon { width: 100px; height: 100px; overflow: hidden; border-radius: 50%; position: absolute; box-shadow: 0 0 20px 20px #000 inset, 0 0 20px 2px #000; animation: move-around 5s ease-in-out infinite alternate; } .moon:after{ position: absolute; content: ""; top: 0; bottom: 0; left: 0; right: 0; box-shadow: -20px -20px 50px 2px #000 inset; border-radius: 50%; } @keyframes spin-right { 100% { transform: rotate(360deg); } } .moon > .inside2 { width: 200%; height: 100%; animation-name: spin; animation-duration: 30s; animation: spin 30s linear alternate infinite; background: url(https://pds-rings.seti.org/press_releases/medium/PIA12xxx/PIA12577_med.jpg); background-size: cover; } .star { background: white; position: absolute; border-radius: 100%; z-index: -2; } </style> </head> <body> <div class="earth"> <div class="inside"></div> </div> <div class="air" id="moon"> <div class="moon"> <div class="inside2"></div> </div> </div> <div id="stars"></div> </body> <script> let moon = document.getElementById("moon"); let z = 20; const changeZ = () => { if (z == 20) { z = -1; } else { z = 20; } moon.style.zIndex = z; }; let stars = document.getElementById("stars"); const addStar = () => { let star = document.createElement("div"); let x = Math.floor(Math.random() * 100); let y = Math.floor(Math.random() * 100); let size = Math.floor(Math.random() * 5); let time = Math.floor(Math.random() * 10) + 5; star.className = "star"; star.style.left = `${x}vw`; star.style.top = `${y}vh`; star.style.width = `${size}px`; star.style.height = `${size}px`; star.style.animation = `star ${time}s ease-in-out infinite`; stars.appendChild(star); }; const initStarts = () => { for (let i = 0; i < 150; i++) { addStar(); } }; initStarts(); setInterval(changeZ, 5000); </script> </html>