เอามาเล่น (Branch 1989)

✨ Putthima D.

<!DOCTYPE html>
<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">
    <title>Galaxy</title>
    <link rel="icon" type="image/png" href="https://i.imgur.com/OxjXvXD.png">
</head>
<style>
    body, html{
        margin: 0;
        height: 100%;
        overflow: hidden;
    }
    .bg{
        height: 100%;
        width: 100%;
        background: black;
        /* background-image: radial-gradient(circle at 100% 100%, #234465, #050c14); */
        /* background-repeat: no-repeat; */
    }
    .duangdow, .kaprib{
        position: absolute;
        width:100%;
        height:100%;
    }
    .duangdow{
        background: url("https://raw.githubusercontent.com/spicyz/space-pew-pew/main/stars.png");
    }
    .duangdow:nth-child(2){
        scale: 2;
        position: absolute;
        z-index: 1;
        animation: dow-loen 150s linear infinite;
    }
    .kaprib{
        background: transparent url("https://raw.githubusercontent.com/spicyz/space-pew-pew/main/kaprib.png") repeat top center;
        z-index: 2;
        animation: make-kaprib 200s linear infinite;
    }
    .jaruad{
        z-index: 4;
        position: absolute;
        left: 0;
        bottom: 0;
        width: 128px;
        height: 128px;
        /* scale: 0.2; */
/*         animation: jaruad-poong 4.5s cubic-bezier(.66,.05,.54,1.07) infinite; */
    }
    .ukkabad{
        z-index: 3;
        position: absolute;
        left: 0;
        top: 0;
        width: 64px;
        height: 64px;
        animation: ukkabad-tok 2s linear infinite;
    }
  .sun{
		z-index:2;
  		position:absolute;
   	top:30%;
   	left:80%;
   	width:150px;
   	height:150px;
   	animation: sun-move 25s linear infinite;
  
  }
  .earth{
		z-index:2;
    position:absolute;
    top:37%;
    left:50%;
    width:50px;
    height:50px;
    animation: eart-move 5s linear infinite;
    
  }
  @keyframes dow-loen {
        from {left: -50%;}
        to {left: 60%;}
    }
    @keyframes jaruad-poong{
        from {
            left: -256px;
            bottom: -256px;
            width: 256px;
            height: 256px;
        }
        to {
            left: 100%;
            bottom: 100%;
            width: 64px;
            height: 64px;
        }
    }
    @keyframes ukkabad-tok{
        from {
            left: 0;
            top: 0;
            width: 64px;
            height: 64px;
        }
        to {
            left: 100%;
            top: 100%;
            width: 350px;
            height: 350px;
        }
    }
    @keyframes make-kaprib {
        from {background-position:0 0;}
        to {background-position:-10000px 5000px;}
    }
  @keyframes sun-move{
        from{transform: rotate(0deg)}
        to{transform: rotate(360deg)}
  }
  @keyframes eart-move{
    from{
		left:65%;
      top:50%;
    }
    to{
		left:0%;
      top:50%;
    }
  }
  </style>
<body>
    <div class="bg" id="backgroundngai">
        <div class="duangdow"></div>
        <div class="duangdow"></div>
        <div class="kaprib"></div>
      <div class="sun"></div> 
      <div class="earth"></div>
      
        <img src="https://cdn.discordapp.com/attachments/808985405533847562/809012580177412126/rocket.png" class="jaruad" alt="">
        <img src="https://cdn.discordapp.com/attachments/808985405533847562/809012586431512636/meteor.png" class="ukkabad" alt="">
      <img src="https://www.flaticon.com/svg/vstatic/svg/146/146199.svg?token=exp=1613039134~hmac=6188baf5d353f1e508fe195abfdd7791" class="sun" alt="">
      <img src="https://i.imgur.com/OxjXvXD.png"class="earth" alt="">
    </div>
</body>
<script>

</script>
</html>