space pew pew

✨ SUPACHAI KHEAWJUY

<!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{
        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: 128px;
        height: 128px;
        animation: ukkabad-tok 3s 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: 128px;
            height: 128px;
        }
        to {
            left: 100%;
            top: 100%;
            width: 512px;
            height: 512px;
        }
    }
    @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="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="ukkabad" alt="">
    </div>
</body>
<script>

</script>
</html>