QE Position เจมส์ ฝ้าย

✨ นายศุภณัฐ แก้วกุลศรี

<html>
<head>
	<title>Let's Start</title>
  
  <style>
    body{
      background:#fff;
      font-family:sans-serif;
      margin:0;
    }
    #space{
      background:hsl(280,0%,10%);
		/*background:linear-gradient(to bottom,
          hsl(280,100%,50%),
          hsl(250,100%,50%) ,
          hsl(200,100%,50%) ,
          hsl(180,100%,50%)
        );*/
      border-radius:5%;
      height:600px;
      width:600px;
      margin:auto;
      position:relative;
      margin-top:5em;
      overflow:hidden;
      box-shadow:0px 5px 10px 1px hsl(280,0%,50%);
   
    }
    #where{
		height:1400px;
      width:1400px;
      background:hsl(200,50%,10%);
      position: absolute;
      margin-top:-100px;
      left:-400px;
      animation: galaxy 8s infinite alternate;
     	
    }
    .star1{
		background:#fff;
      height:5px;
      width:5px;
      border-radius:50%;
      position:absolute;
      margin-top:10em;
  		margin-left:27em;
      animation: twinkle 3s infinite alternate;
       box-shadow:0px 0px 10px 1px hsl(280,0%,100%);
    }
    .star2{
		background:#fff;
      height:5px;
      width:5px;
      border-radius:50%;
      position:absolute;
      margin-top:15em;
  		margin-left:50em;
      animation: twinkle 4.3s infinite alternate;
      box-shadow:0px 0px 10px 1px hsl(280,0%,100%);
    }
    .star3{
		background:#fff;
      height:5px;
      width:5px;
    	transform: rotatez(45deg);
      position:absolute;
      margin-top:11em;
  		margin-left:58em;
      animation: twinkle 3.5s infinite alternate;
      box-shadow:0px 0px 10px 1px hsl(280,0%,100%);
    }
    .star4{
		background:#fff;
      height:5px;
      width:5px;
     transform: rotatez(45deg);
      position:absolute;
      margin-top:18em;
  		margin-left:34em;
      animation: twinkle 3s infinite alternate;
      box-shadow:0px 0px 10px 1px hsl(280,0%,100%);
    }
    .star5{

height:5px;
      width:5px;
  
     	background:#fff;
      box-shadow:0px 0px 10px 1px hsl(280,0%,100%);
      position:absolute;
      margin-top:13em;
  		margin-left:38em;
      animation: twinkle 3.2s infinite alternate;
    }
    .star6{
		background:#fff;
      height:5px;
      width:5px;
      border-radius:50%;
      position:absolute;
      margin-top:9em;
  		margin-left:45em;
      animation: twinkle 2s infinite alternate;
      box-shadow:0px 0px 10px 1px hsl(280,0%,100%);
      box-shadow:0px 0px 10px 1px hsl(280,0%,100%);
    }
    #rocket{
      transform:rotatez(-45deg);
      height:200px;
      width:200px;
      position:absolute;
      margin:auto;
      top:50%;
      left:calc(50% - (200px/2));
      animation: loy 2s infinite alternate;
    }
    .cir1{
		height:200px;
      width:200px;
      box-shadow:0px 0px 0px 1px hsl(280,0%,55%);
      border-radius:50%;
      position:absolute;
      margin:calc(50% - (200px/2));
    }
    .cir2{
		height:400px;
      width:400px;
      box-shadow:0px 0px 0px 1px hsl(280,0%,55%);
      border-radius:50%;
      position:absolute;
      margin:calc(50% - (400px/2));
      animation: swap 100s infinite linear;
    }
    .cir3{
		height:600px;
      width:600px;
      box-shadow:0px 0px 0px 1px hsl(280,0%,55%);
      border-radius:50%;
      position:absolute;
      margin:calc(50% - (600px/2));
      animation: swap 40s infinite linear;
     	
    }
    .cir4{
		height:800px;
      width:800px;
      box-shadow:0px 0px 0px 1px hsl(280,0%,55%);
      border-radius:50%;
      position:absolute;
      margin:calc(50% - (800px/2));
      animation: swap 30s infinite linear;
      
    }
    .moon{
		margin:30px;
    }
    .saturn{
		margin:60px;
      transform: rotatez(-70deg)
    }
    .neptune{
		margin:50px;
      position:absolute;
      bottom:0%
      
    }
    .smoke1{
		height:20px;
      width:20px;
      border-radius:50%;
      background:hsla(0,0%,100%,80%);
      margin-top:30em;
  		margin-left:17em;
      position:absolute;
      animation:pudpud .5s infinite linear;
    }
    .smoke2{
		height:40px;
      width:40px;
      border-radius:50%;
      background:#888;
      margin-top:30em;
  		margin-left:17.5em;
      position:absolute;
      animation:pudpud .8s infinite linear;
      background:hsla(0,0%,100%,80%);
    }
    .smoke3{
		height:20px;
      width:20px;
      border-radius:50%;
      background:#888;
      margin-top:30em;
  		margin-left:19em;
      position:absolute;
      animation:pudpud 1s infinite linear;
      background:hsla(0,0%,100%,80%);
    }
    /*margin-top:13em;
  		margin-left:10em;*/
    @keyframes swap{
      from{
			transform:rotatez(0deg);
      }
      to{
			transform:rotatez(360deg)
      }
    }
    @keyframes twinkle{
      from{
			opacity:1;
      }
      to{
			opacity:0;
      }
    }
    @keyframes galaxy{
      0%{background:hsl(280,0%,10%);}
      50%{background:hsl(200,50%,10%);}
      100%{background:hsl(270,50%,10%)}
    }
    @keyframes loy{
      from{transform: translatey(0px) rotatez(-45deg);}
      to{transform: translatey(10px) rotatez(-45deg);}
    }
    @keyframes pudpud{
      from{transform:translatey(0px)}
      to{transform:translatey(150px)}
    }
  </style>
</head>
<body>
  <div id="space">
    <div id="where">
      <div class="star1"></div>
      <div class="star2"></div>
      <div class="star3"></div>
      <div class="star4"></div>
      <div class="star5"></div>
      <div class="star6"></div>
      <div class="cir1"></div>
      <div class="cir2"><img src="https://cdn.discordapp.com/attachments/940466823760064553/940593624935194664/moon.png" height="50" class="moon"></div>
      <div class="cir3"><img src="https://cdn.discordapp.com/attachments/940466823760064553/940593624725487666/neptune.png" height="70px" class="neptune"></div> 
      <div class="cir4"><img src="https://cdn.discordapp.com/attachments/940466823760064553/940593624540913674/saturn.png" height="95" class="saturn"></div>
    </div>
    <div class="smoke1"></div>
    <div class="smoke2"></div>
    <div class="smoke3"></div>
    <div id="rocket">
  <img src="https://cdn.discordapp.com/attachments/940466823760064553/940593625174265876/startup.png" height="200px">
  </div>
  </div>

</body>
</html>