QE Week5 Group-B P’Faii

✨ JIRAYU TORRANATHITI

<html>
  <head>
    <title>Let's Start
    </title>
 <style type="text/css">
    body {
        overflow: hidden;
    }
     body{
  background: radial-gradient(circle, rgba(122,87,191,1) 0%, rgba(65,29,137,1) 33%, rgba(41,18,108,1) 65%, rgba(22,12,84,1) 80%, rgba(1,4,41,1) 100%);
  background-size: 150% 250%;
  animation: gradient 15s ease infinite;
}
.pluto{
  width: 350px;
  height: auto;
  animation: rotate 5s alternate infinite;
}
.uranus{
  width: 200px;
  height: auto;
  left: 13em;
  position: relative;
  animation: newrotate 5s linear infinite;
}
.rocket{
  width: 200px;
  height: auto;
  position: relative;
  right: -35em;
  animation: rotate1 7s alternate infinite;
}
.shooting{
  width: 50%;
  height: 75%;
  top: -12em;
  float: right;
  position: relative;
  animation: kayub 5s alternate infinite;
}
.moon{
  width: auto;
  height: auto;
  left: 18em;
  top: 10em;
  position: absolute;
}
.cat{
  height: 50%;
  left: 20em;
  top: 12em;
  position: absolute;
  animation: kayubcat 5s alternate infinite;
}
.star{
  width: 80%;
  height: 80%;
  animation: opa 5s alternate infinite;
  position: absolute;
  top: 0px;
  z-index: -2;
}
.star1{
  width: 20%;
  height: 20%;
  animation: opa 5s alternate infinite;
  position: fixed;
  top: 0px;
  z-index: -2;
}
@keyframes gradient {
 0% {
  background-position: 0% 50%;
 }
 50% {
  background-position: 100% 50%;
 }
 100% {
  background-position: 0% 50%;
 }
}

@keyframes opa {
 0% {
  opacity: 5%;
 }
 50% {
  opacity: 50%;
 }
 100% {
  opacity: 60%;
 }
}

@keyframes newrotate {
  0% {
    transform: rotate(0deg);
  }
   100% {
    transform: rotateZ(360deg);
  }
}

@keyframes rotate {
  0% {
    transform: rotateZ(0deg);
  }
  50% {
    transform: rotateZ(20deg);
  }
   100% {
    transform: rotateZ(0deg);
  }
}

@keyframes rotate1 {
  0% {
    transform: rotateZ(0deg);
  }
  50% {
    transform: rotateZ(320deg);
  }
   100% {
    transform: rotateZ(360deg);
  }
}

@keyframes kayub{
  0%{
    transform: translateY(20px)
  }
    50%{
    transform: translateY(40px)
  }
      100%{
    transform: translateX(60px)
  }
}
@keyframes kayubcat{
  0%{
    transform: translateY(20px)
  }
    50%{
    transform: translateY(40px)
  }
      100%{
    transform: translateX(60px)
  }
}

/*  ดาว*/
@keyframes opacity{
    0% {opacity: .2;}
    100% {opacity: 1;}
}
@keyframes move{
    0% {transform: translate(0vw,0vw);}

100% {transform: translate(-150vw,100vw);}
}
.sky{
    display: block;
    position: absolute;
    background: #fff;
    width: 6px;
    height: 6px;
    transform: rotate(45deg);
    box-shadow:0px 0px 5px 3px rgb(255, 255, 184);
}

.sky:nth-child(1){
    right: 0;
    transform: rotate(45deg);
    animation: move 2s linear infinite, opacity 1s infinite alternate;
}
.sky:nth-child(2){
    right: 5%;
    transform: rotate(45deg);
    animation: move 3s linear infinite, opacity 0.5s infinite alternate;
}
.sky:nth-child(3){
    right: 5%;
    transform: rotate(45deg);
    animation: move 2.5s linear infinite, opacity 1s infinite alternate;
}
.sky:nth-child(4){
    right: 10%;
    transform: rotate(45deg);
    animation: move 4s linear infinite, opacity 0.5s infinite alternate;
}
.sky:nth-child(5){
    right: -5%;
    transform: rotate(45deg);
    animation: move 3.5s linear infinite, opacity 1s infinite alternate;
}
.sky:nth-child(6){
    top: 80%;
    right: 5%;
    animation: opacity 1s infinite alternate;
}
.sky:nth-child(7){
    top: 70%;
    right: 15%;
    animation: opacity 0.5s infinite alternate;
}
.sky:nth-child(8){
    top: 59%;
    right: 30%;
    animation: opacity 1.5s infinite alternate;
}
.sky:nth-child(9){
    top: 50%;
    right: 55%;
    animation: opacity 0.2s infinite alternate;
}
.sky:nth-child(10){
    top: 65%;
    right: 70%;
    animation: opacity 1.2s infinite alternate;
}
.sky:nth-child(11){
    top: 45%;
    right: 45%;
    animation: opacity 3s infinite alternate;
}
.sky:nth-child(12){
    top: 71%;
    right: 19%;
    animation: opacity 3s infinite ;
}
.sky:nth-child(13){
    top: 11%;
    right: 50%;
    animation: opacity 2s infinite alternate;
}
.sky:nth-child(14){
    top: 10%;
    right: 30%;
    animation: opacity 0.5s infinite alternate;
}
.sky:nth-child(15){
    top: 40%;
    right: 20%;
    animation: opacity 1.5s infinite ;
}
.sky:nth-child(16){
    top: 35%;
    right: 65%;
    animation: opacity 1.5s infinite alternate;
}
.sky:nth-child(17){
    top: 20%;
    right: 70%;
    animation: opacity 1s infinite ;
}
.sky:nth-child(18){
    top: 70%;
    right: 85%;
    animation: opacity 0.5s infinite alternate;
}
.sky:nth-child(19){
    top: 49%;
    right: 99%;
    animation: opacity 2s infinite ;
}
.sky:nth-child(20){
    top: 85%;
    right: 90%;
    animation: opacity 2s infinite alternate;
}
.sky:nth-child(21){
    top: 95%;
    right: 10%;
    animation: opacity 1.5s infinite alternate;
}
.sky:nth-child(22){
    top: 85%;
    right: 25%;
    animation: opacity 0.3s infinite alternate;
}
 </style>
  </head>
  <body>
  <div class="sky"></div>
    <div class="sky"></div>
    <div class="sky"></div>
    <div class="sky"></div>
    <div class="sky"></div>
    <div class="sky"></div>
    <div class="sky"></div>
    <div class="sky"></div>
    <div class="sky"></div>
    <div class="sky"></div>
    <div class="sky"></div>
    <div class="sky"></div>
    <div class="sky"></div>
    <div class="sky"></div>
    <div class="sky"></div>
    <div class="sky"></div>
    <div class="sky"></div>
    <div class="sky"></div>
    <div class="sky"></div>
    <div class="sky"></div>
    <div class="sky"></div>
    <div class="sky"></div>

</body>
</html>