space work (Copy 1971)

✨ นายธาดา อัมพรประเสริฐ

<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

      <style>body{
    background: black;
    margin: 0;
    overflow: hidden;
}
.container {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }
.stars{
    border-radius: 50%;
    background-color: white;
    opacity: .75;
    position: absolute;
}
#stars{
    position: relative;
    z-index: -1;
    transform: rotatez(45deg);
}
#earth{
    width: 300px;
    height: 300px;
    position: absolute;
    top: 30vh;
    left: 50vw;
    z-index: 10;
    animation: rote 3s infinite linear;
}
#space{
    width: 100px;
    height: 100px;
    position: absolute;
    transform-origin: 300px 250px;
    top: 15vh;
    left: 40vw;
    z-index: 10;
    animation: rotenspace 3s infinite ease-in-out;
}

@keyframes rotenspace{
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}
@keyframes rote{
    from{
        transform: rotate(360deg);
    }
    to{
        transform: rotate(0deg);
    }
}

@keyframes star-move{
    0%{
        transform: translatex(0vw);
    }
    100%{
        transform: translatex(100vw);
    }
}</style>
    </head>
    <body>
    <div class="container">
    <img src="https://www.pngrepo.com/download/6079/planet-earth.png" class="earth" id = "earth">
    <img src="https://media.discordapp.net/attachments/801450532006133822/809053894940295228/23_20210210203054.PNG?width=559&height=559" class="space" id = "space">
    <div class="stars" id="stars"></div>
    </div>
    </body>
    <script>
      const starpoint = document.getElementById("stars");

const star_intive = setInterval(addstar, 50);

usedstar();
    </script>
</html>