Rocket (Copy 12272) (Copy 12333)

✨ นายพงศ์พันธุ์ แสงพล

<html>
<head>
	<title>Rocket</title>
  <style>
*{
	margin:0;
	padding:0;
}
body{
	display:flex;
	justify-content:center;
	align-items:center;
	height:100vh;
  background-image:
          url(https://i.pinimg.com/736x/ce/09/b3/ce09b3dc3bc1ab51293d55b610dc3f22.jpg);
	overflow:hidden;
  font-family: cursive;
}
.rocket{
	position:absolute;
	width:500px;
	height:500px;
	animation-name: spin;
	animation:spin 10s linear infinite;
  z-index:5;
}
    .saturn{
      position:absolute;
      width:50px;
      right:40px;
      animation: 20s linear infinite alternate;
      animation-name:saturn;
      transform-style: preserve-3d;
      transform: perspective;
    }
    
     @keyframes saturn{
      form{
		   transform: rotate(0deg);
      }
      to{
         transform: rotate(180deg);
       }
    }
    
    .neptune{
      position:absolute;
      width:200px;
      right:100px;
      bottom:50px;
      animation: 50s linear infinite;
      animation-name:earth;
    }
    
    .text{
      position:absolute;
      bottom:60px;
      font-weight:bold;
      font-size:60px;
      color:white;
      transform-style:preserve-3d;
      box-shadow:0px 10px 20px #0003;
    }
    .sun{
      position:absolute;
      left:-200px;
      top:-250px;
      z-index:-1;
      width: 600px;
      height: 600px;    
    }
    
    
    .earth{
      width:100px;
      position:absolute;
      left:200px;
      top:100px;
      animation: 20s linear infinite;
      animation-name:earth;
      z-index:0;
    }
    
    .mars{
      width:800px;
      position:absolute;
      left:-400px;
      top:600px; 
      animation: 100s linear infinite;
      animation-name:earth;
    }
    
    .astronaut{
      width:100px;
      position:absolute;
      top:80px;
      right:50px;
      animation: 20s linear infinite alternate;
      animation-name: astronaut;
    }
    
    @keyframes astronaut{
      form{
          transform: translatex(440px) rotate(0deg);
        }
        to{
          transform: translatex(-650px) rotate(360deg);
        }
      }
  
    @keyframes spin{ 
	0% { transform: rotate(0deg);transform:rotate(0deg);}
	25% { transform: rotate(90deg);transform:rotate(90deg);}
	50% { transform: rotate(180deg);transform:rotate(180deg);}
	75% { transform: rotate(270deg);transform:rotate(270deg);}
	100% { transform: rotate(360deg);transform:rotate(360deg);} 
}
   
    @keyframes earth{
      form{
		   transform: rotate(0deg);
      }
      to{
         transform: rotate(360deg);
      }
      
      #moon{
		width:40%;  
	}
    }
    .astronaut2{
      width:100px;
      position:absolute;
      top:400px;
      left:50px;
      animation-name: astronaut2;
      animation: 20s linear infinite alternate;
    }
    
      
    @keyframes astronaut2{
      form{
		   transform: rotate(0deg);
      }
      to{
         transform: rotate(360deg);
      }
    
}
  </style>
</head>
<img id="moon" src="http://www.clker.com/cliparts/8/4/7/a/12279737022024966533rg1024_Moon_in_comic_style.svg" alt="moon">
<div class="rocket">
<img src="https://maxcdn.icons8.com/Share/icon/Transport//rocket1600.png" alt="rocket" width="20%">
</div>
  <img class="earth" src="https://www.pikpng.com/pngl/b/222-2222315_earth-drawing-cartoon-free-hd-image-clipart-earth.png" >
  <img class="astronaut" src="https://i.pinimg.com/originals/a0/26/1b/a0261b885cfba5a65c675c33327acf5a.png" >