QE P’Arin Group D

✨ นายอภิรัฐ จำนงค์รัตน์

<html>
  <head>
    <title>Let's Start
    </title>
    <style>
      body{
overflow:hidden; background:url(https://blenderartists.org/uploads/default/original/4X/7/e/2/7e2d7bea4ac21388c4a96e1371f375c4ce00094b.jpg);
}

@keyframes spin{
  100% {
    transform: translateX(-50%);
  }
}

@keyframes orbit {
    0% {transform: rotate3d(0, 1, 0, 0deg) translateX(300%) rotate3d(0, 1, 0, 0deg);z-index:1}
  43%{
    z-index:-1;
  }
  65%{
    z-index:1;
  }
  100% {transform: rotate3d(0, 1, 0, 360deg) translateX(300%) rotate3d(0, 1, 0, -360deg);z-index:1;
  }
}
@keyframes orbit2 {
    0% {transform: rotate3d(0, 1, 0, 0deg) translateX(350%) rotate3d(0, 1, 0, 0deg);}
  70%{
    z-index:1;
  }
  100% {transform: rotate3d(0, 1, 0, 360deg) translateX(350%) rotate3d(0, 1, 0, -360deg);
    }
}
@keyframes orbit3 {
    0% {transform: rotate3d(0, 1, 0, 0deg) translateX(400%) rotate3d(0, 1, 0, 0deg); z-index:-1;}
  75%{
    z-index:1;
  }
  100% {transform: rotate3d(0, 1, 0, 360deg) translateX(400%) rotate3d(0, 1, 0, -360deg);
    }
}
.sun {
  width: 300px;
  height: 300px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  overflow: hidden;
  border-radius: 50%;
  box-shadow: 0 0 20px 20px #d14009 inset, 0 0 30px 5px #d14009;
  z-index:1;
}

.sun:after {
  position: absolute;
  content: "";
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  box-shadow: -20px -20px 50px 2px #d14009 inset;
  border-radius: 50%;
}

.sun > div {
  width: 200%;
  height: 100%;
  animation: spin 30s linear alternate infinite;
  background: url(https://imgur.com/wZ1tpuo.jpg);
  background-size: cover;
}
.jupiter {
  width: 210px;
  height: 210px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  overflow: hidden;
  border-radius: 50%;
  box-shadow: 0 0 20px 20px #B69D85 inset, 0 0 30px 5px #B69D85;
  transform-style: preserve-3d;
  animation: orbit2 25s linear infinite;
}

.jupiter:after {
  position: absolute;
  content: "";
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  box-shadow: -20px -20px 50px 2px #B69D85 inset;
  border-radius: 50%;
}

.jupiter > div {
  width: 200%;
  height: 100%;
  animation: spin 5s linear alternate infinite;
  background: url(https://imgur.com/UJaICVY.jpg);
  background-size: cover;
}

.mercury {
  width: 70px;
  height: 70px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  overflow: hidden;
  border-radius: 50%;
  box-shadow: 0 0 20px 20px #94908D inset, 0 0 30px 5px #94908D;
  animation: orbit 5s linear infinite;
}

.mercury:after {
  position: absolute;
  content: "";
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  box-shadow: -20px -20px 50px 2px #94908D inset;
  border-radius: 50%;
}

.mercury > div {
  width: 200%;
  height: 100%;
  animation: spin 3s linear alternate infinite;
  background: url(https://imgur.com/74BuFMB.jpg);
  background-size: cover;
}

.neptune {
  width: 170px;
  height: 170px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  overflow: hidden;
  border-radius: 50%;
  box-shadow: 0 0 20px 20px #2E3586 inset, 0 0 30px 5px #2E3586;
  animation: orbit3 30s linear infinite;
}

.neptune:after {
  position: absolute;
  content: "";
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  box-shadow: -20px -20px 50px 2px #2E3586 inset;
  border-radius: 50%;
}

.neptune > div {
  width: 200%;
  height: 100%;
  animation: spin 10s linear alternate infinite;
  background: url(https://imgur.com/WUikCnv.jpg);
  background-size: cover;
}

.earth {
  width: 120px;
  height: 120px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  overflow: hidden;
  border-radius: 50%;
  box-shadow: 0 0 20px 20px hsl(213, 26%, 22%) inset, 0 0 30px 5px hsl(213, 26%, 22%);
  animation: orbit 10s linear infinite;
}

.earth:after {
  position: absolute;
  content: "";
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  box-shadow: -20px -20px 50px 2px hsl(213, 26%, 22%) inset;
  border-radius: 50%;
}

.earth > div {
  width: 200%;
  height: 100%;
  animation: spin 10s linear alternate infinite;
  background: url(https://imgur.com/SkbcvkJ.jpg);
  background-size: cover;
}
    </style>
  </head>
  <body>
<div class="sun"><div></div></div>
<div class="mercury"><div></div></div>
<div class="earth"><div></div></div>
<div class="jupiter"><div></div></div>
<div class="neptune"><div></div></div>
  </body>
</html>