space pew pew (Branch 1932)

✨ นายภานุพงศ์ เฉลยรัตน์

<!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>Space pew pew</title>
    <link rel="icon" type="image/png" href="https://raw.githubusercontent.com/spicyz/space-pew-pew/main/jupiter.png">
</head>
<style>
    body, html{
        margin: 0;
        height: 100%;
        overflow: hidden;
    }
    .bg{
/*         --t1: #234465;
        --t2: #050c14; */
        height: 100%;
        width: 100%;
/*         background-image: radial-gradient(circle at 100% 100%,var(--t1), var(--t2));
        background-repeat: no-repeat; */
    }
    .duangdow, .kaprib{
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        width:100%;
        height:100%;
        display:block;
    }
    .duangdow{
        background: #000 url("https://raw.githubusercontent.com/spicyz/space-pew-pew/main/stars.png") repeat top center;
    }
    .kaprib{
        background: transparent url("https://raw.githubusercontent.com/spicyz/space-pew-pew/main/kaprib.png") repeat top center;
        z-index: 1;
        animation: make-kaprib 200s linear infinite;
    }
    .jaruad{
        z-index: 1;
        position: absolute;
        width: 128px;
        height: 128px;
        transform: rotateZ(-45deg);
        animation: jaruad-poong 30s cubic-bezier(.66,.05,.54,1.07) infinite;
    }
    .ukkabad1{
        z-index: 4;
        position: absolute;
        left: 0;
        top: 0;
        width: 128px;
        height: 128px;
      transform: rotateZ(45deg);
        animation: ukkabad-tok1 5s linear infinite; 
    }
  .ukkabad2{
        z-index: 2;
        position: absolute;
        left: 100%;
        top: 0%;
        width: 0px;
        height: 0px;
      transform: rotateZ(45deg);
        animation: ukkabad-tok2 10s linear infinite; 
    }
  .ufo{
		z-index: 3;
        position: absolute;
        left: -64px;
        top: 50%;
        width: 64px;
        height: 64px;
        animation: ufo-poong 5s linear infinite;
  }
  .rock1{
		z-index: 4;
        position: absolute;
        left: 50%;
        top: 50%;
        width: 64px;
        height: 64px;
    animation: rock-poong1 5s linear infinite;
  }
  .rock2{
		z-index: 1;
        position: absolute;
        left: 20%;
        top: 0%;
        width: 64px;
        height: 64px;
    animation: rock-poong2 5s linear infinite;
  }
  .rock3{
		z-index: 2;
        position: absolute;
        left: 90%;
        top: 10%;
        width: 64px;
        height: 64px;
    animation: rock-poong2 5s linear infinite;
  }
  .rock4{
		 z-index: 4;
        position: absolute;
        left: 10%;
        top: 90%;
        width: 64px;
        height: 64px;
    animation: rock-poong1 5s linear infinite;
  }
  .rock5{
		z-index: 1;
        position: absolute;
        left: 70%;
        top: 75%;
        width: 64px;
        height: 64px;
    animation: rock-poong2 5s linear infinite;
    
  }
  .rock6{
		z-index: 1;
        position: absolute;
        left: 5%;
        top: 70%;
        width: 64px;
        height: 64px;
    animation: rock-poong1 5s linear infinite;
    
  }
  .rock7{
		z-index: 1;
        position: absolute;
        left: 30%;
        top: 15%;
        width: 64px;
        height: 64px;
    animation: rock-poong2 5s linear infinite;
    
  }
  .rock8{
		z-index: 4;
        position: absolute;
        left: 80%;
        top: 30%;
        width: 64px;
        height: 64px;
    	  animation: rock-poong1 5s linear infinite;
    
  }
  @keyframes rock-poong1{
        0% {width: 0px;height: 0px;}
        100% {width: 100px;height: 100px;}
  }
  @keyframes ufo-poong{
        0% {left: 100%;top:0%;width: 20px;height: 20px;}
    	  25%{left: -10%;top: 25%;}
    	  75%{left: 100%;top: 75%;}
        100% {left: 100%;top: 100%;width: 150px;height: 150px;}
  }
  @keyframes jaruad-poong{
        0%{left: 40%;		bottom: -10%;		width: 200px;		height: 200px;}
        100%{left: 50%;		bottom: 80%;		width: 0px;		height: 0px;}
    }
    @keyframes ukkabad-tok1{
        from {left: 20%;top: -5%;width: 64px;height: 64px;}
        to {left: 20%;top: 110%;width: 258px;height: 258px;}
    }
  @keyframes ukkabad-tok2{
        0%,50% {left: 80%;top: 0%;width: 0px;height: 0px;}
        100% {left: 70%;top: 100%;width: 258px;height: 258px;}
    }
    @keyframes make-kaprib {
        from {background-position:0 0;}
        to {background-position:-10000px 5000px;}
    }
</style>
<body>
    <div class="bg" id="backgroundngai">
        <div class="duangdow"></div>
        <div class="kaprib"></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="ukkabad1" alt="">
      <img src="https://cdn.discordapp.com/attachments/808985405533847562/809012586431512636/meteor.png" class="ukkabad2" alt="">
      <img src="https://media.discordapp.net/attachments/808985405533847562/809012584970846248/ufo.png" class="ufo" alt="">
      <img src="https://media.discordapp.net/attachments/808985405533847562/809012591514746880/asteroid.png" class="rock1" alt="">
      <img src="https://media.discordapp.net/attachments/808985405533847562/809012591514746880/asteroid.png" class="rock2" alt="">
      <img src="https://media.discordapp.net/attachments/808985405533847562/809012591514746880/asteroid.png" class="rock3" alt="">
      <img src="https://media.discordapp.net/attachments/808985405533847562/809012591514746880/asteroid.png" class="rock4" alt="">
      <img src="https://media.discordapp.net/attachments/808985405533847562/809012591514746880/asteroid.png" class="rock5" alt="">
      <img src="https://media.discordapp.net/attachments/808985405533847562/809012588901433364/asteroid_1.png" class="rock6" alt="">
      <img src="https://media.discordapp.net/attachments/808985405533847562/809012588901433364/asteroid_1.png" class="rock7" alt="">
      <img src="https://media.discordapp.net/attachments/808985405533847562/809012588901433364/asteroid_1.png" class="rock8" alt="">
    </div>
</body>
<script>

</script>
</html>