C-faiifu (QE-Position) (Copy 12527)

✨ SUNAN OUMSUB

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Party C Faiifu</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <style>
      body{
  background:rgb(39, 158, 231);
}
.box {
  position: relative;
  background-image:url("https://cdn.discordapp.com/attachments/873292196651094018/940591560553291796/sea.jpg");
  background-size: cover;
  border-radius: 1%;
  box-shadow: 0px 10px 20px hsl(0, 0%, 0%, 90%);
  width: 1280px;
  height: 720px;
  margin:auto;
  margin-top:10%;
  /* z-index: 1; */
  overflow: hidden;
}

#crab{
  position: absolute;
  bottom: -20%;
  left: 60%;
  z-index: 100;
  animation: crab_walk 4s linear infinite;
}
      
#star{
  position: absolute;
  bottom: -9%;
  left: 5%;
  z-index: 2;
  animation: star_dukdik 2s linear infinite;
}

#prasat{
  position: absolute;
  transform: scale(0.2);
  top: 3%;
  right: 1%;
  z-index: 1;
  
}

#ball{
  position: absolute;
  z-index: 2;
  top: 38%;
  left: 15%;
  transform: scale(0.2);
  animation: ball_deng 2s linear infinite;
}

#chechuan{
  position: absolute;
  z-index: 100;
  top: 45%;
  left: 1%;
  transform: scale(0.3);
  animation: chechuan_kayab 3s linear infinite;
  
}
#ship{
  position: absolute;
  bottom: 10%;
  left: 80%;
  z-index: 1000;
  animation: ship_high 15s linear infinite;
}

#rom{
  position: absolute;
  transform: scale(0.8);
  top: 32%;
  left: -20%;
  z-index: 1000;
}

@keyframes crab_walk {
  0%   {transform: rotate(0deg) translateX(0px) scale(0.3);}
  25%  {transform: rotate(-5deg) translateX(100px) scale(0.3);}
  50%  {transform: rotate(5deg) translateX(200px) scale(0.3);}
  75%  {transform: rotate(-5deg) translateX(100px) scale(0.3);}
  100% {transform: rotate(0deg)  translateX(0px) scale(0.3);}
}

@keyframes star_dukdik {
  0%   {transform: rotate(0deg) scale(0.2);}
  25%  {transform: rotate(5deg) scale(0.2);}
  75%  {transform: rotate(-5deg) scale(0.2);}
  100% {transform: rotate(0deg) scale(0.2);}
}

@keyframes ball_deng {
  0%   {transform: rotate(0deg) translateY(0px) scale(0.2);}
  25%  {transform: rotate(50deg) translateY(-100px) scale(0.2);}
  50%  {transform: rotate(100deg) translateY(-200px) scale(0.2);}
  75%  {transform: rotate(50deg) translateY(-100px) scale(0.2);}
  100% {transform: rotate(0deg) translateY(0px)scale(0.2);}
}

@keyframes chechuan_kayab {
  0%   {transform: rotate(0deg) translateX(0px) translateY(0px) scale(0.3);}
  25%  {transform: rotate(5deg) translateX(100px) translateY(30px) scale(0.3);}
  50%  {transform: rotate(10deg) translateX(200px) translateY(-30px) scale(0.3);}
  75%  {transform: rotate(5deg) translateX(100px) translateY(30px) scale(0.3);}
  100% {transform: rotate(0deg)  translateX(0px) translateY(0px) scale(0.3);}
}

@keyframes ship_high{
  0%    {transform: rotate(0deg) translateX(0px) translateY(0px) scale(0.5);}
  10%   {transform: rotate(0deg) translateX(-140px) translateY(5px) scale(0.5);}
  20%   {transform: rotate(0deg) translateX(-280px) translateY(-5px) scale(0.5);}
  30%   {transform: rotate(0deg) translateX(-420px) translateY(5px) scale(0.5);}
  40%   {transform: rotate(0deg) translateX(-560px) translateY(-5px) scale(0.5);}
  50%   {transform: rotate(0deg) translateX(-700px) translateY(5px) scale(0.5);}
  60%   {transform: rotate(0deg) translateX(-840px) translateY(-5px) scale(0.5);}
  70%   {transform: rotate(0deg) translateX(-980px) translateY(5px) scale(0.5);}
  80%   {transform: rotate(0deg) translateX(-1120px) translateY(-5px) scale(0.5);}
  90%   {transform: rotate(0deg) translateX(-1260px) translateY(5px) scale(0.5);}
  100%  {transform: rotate(0deg) translateX(-1400px) translateY(0px) scale(0.5);}
}

</style>
  </head>
  <body>
    <div class="box">
    <div id="star">
      <img
      src="https://cdn.discordapp.com/attachments/873292196651094018/940614535394508810/pladow-depositphotos-bgremover.png">
    </div>
    <div id="crab">
      <img src="https://cdn.discordapp.com/attachments/873292196651094018/940599144144338964/crab-depositphotos-bgremover_1.png">
    </div>
    <div id="ship">
      <img src="https://cdn.discordapp.com/attachments/873292196651094018/940604983861198958/ship-depositphotos-bgremover.png">
    </div>
    <div id="ball">
      <img src="https://cdn.discordapp.com/attachments/873292196651094018/940618917552988200/-depositphotos-bgremover.png">
    </div>
    <div id="chechuan">
      <img
      src="https://cdn.discordapp.com/attachments/873292196651094018/940609324626100234/-depositphotos-bgremover.png">
    </div>
    <div id="prasat">
      <img src="https://cdn.discordapp.com/attachments/873292196651094018/940616317717864448/-depositphotos-bgremover.png">
      </div>
    <div id="rom">
      <img
      src="https://cdn.discordapp.com/attachments/873292196651094018/940613438110068766/-depositphotos-bgremover_3.png">
    </div>
    <div class="sun"></div>
    </div>
  </body>
</html>