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 initStarts = () => {
  for (let i = 0; i < 150; i++) {
    addStar();
  }
};

initStarts();
setInterval(changeZ, 5000);

</script>
</html>