Team C sspim Week 5 myFamily (Branch 8316)

✨ นายยุทธศิลป์ บุตรโยจันโท

<html>
<head>
  <style>
    body{
  display:flex;
  justify-content:center;
  background: #EEE6D6;
  overflow:hidden;
    }
.world{
  background: #EEE6D6;
  width: 800px;
  height:700px;
  top:5%;
  position: absolute;
  overflow: hidden;
    }
.sun{
  width: 200px;
  height: 200px;
  position: relative;
  background-image:url(https://cdn.discordapp.com/attachments/798209355266523216/809816442513915935/color.png);
  background-size: 200px 200px;
  top:10px;
  left: 20px;
  border-radius: 50%;
  filter: drop-shadow(0 0 30px orange);
  animation:wibwub 5s infinite ,updown 3s infinite alternate;
  
}

.ppim{
  position:absolute;
  bottom:0%;
  right:-150%;
  width:200px;
  height:200px;
  background-image:url(https://i.pinimg.com/originals/b3/ca/39/b3ca390fa0f733a43666994e6525631f.png);
  background-size: 200px 200px;
  animation:swim 10s infinite,wiggle 1s infinite;
}

#shin {
  position:absolute;
  top:180px;
  left:-150%;
  animation:miws 7s infinite;
  animation-timing-function:cubic-bezier(0,.78,.55,.39);
}
#fah{
  position:absolute;
  top:100px;
  left:-150%;
  animation:miws 7s infinite;
  animation-delay: 2.2s;
  animation-timing-function:cubic-bezier(0,.78,.55,.39);
}
#jell{
  position:absolute;
  top:250px;
  left:-150%;
  animation:miws 7s infinite;
  animation-delay: 10.2s;
  animation-timing-function:cubic-bezier(0,.78,.55,.39);
}
#zacc{
  position:absolute;
  top:250px;
  left:-150%;
  animation:miws 7s infinite;
  animation-delay: 4.2s;
  animation-timing-function:cubic-bezier(0,.78,.55,.39);
}
#ice{
  position:absolute;
  top:180px;
  left:-300px;
  animation:miws 7s infinite;
  animation-delay: 5.2s;
  animation-timing-function:cubic-bezier(0,.78,.55,.39);
}
#vee{
  position:absolute;
  top:70px;
  left:-150%;
  animation:miws 7s infinite;
  animation-delay: 15.2s;
  animation-timing-function:cubic-bezier(0,.78,.55,.39);
}
#ria{
  position:absolute;
  top:100px;
  left:-150%;
  animation:miws 7s infinite;
  animation-delay: 6.2s;
  animation-timing-function:cubic-bezier(0,.78,.55,.39);
}
#fluke{
  position:absolute;
  top:35px;
  left:-150%;
  animation:miws 7s infinite;
  animation-delay: 14.2s;
  animation-timing-function:cubic-bezier(0,.78,.55,.39);
}

.fish-body {
  position: absolute;
  top:250px;
  left:100px;
  z-index:1;
  margin-top: 30px;
  margin-left: 40px;
  background-image: pink;
  border-radius: 50%;
  width: 150px; 
  height: 100px;
  display: flex;
}
.fish-body img{
  width:50%;
  height:50%;
  position:absolute;
  border-radius: 50%;
  width: 150px; 
  height: 100px;
}
.tail {
  margin-top: -100px; 
  background-color: pink;
  border-radius: 50%;
  transform: rotate(40deg);
  width: 60px;
  height: 40px;
  position: absolute;
  top:390px;
  left:100px;
  z-index:1;
}
.tailbot {
 margin-top: -100px; 
  background-color: pink;
  border-radius: 50%;
  transform: rotate(-40deg);
  width: 60px;
  height: 40px;
  position: absolute;
  top:420px;
  left:100px;
  z-index:1;
}

@keyframes swim{
  from{
    right: -20%;
  }
  to{
    right: 100%;
  }
}
@keyframes miws{
  from{
    left:-150%;
  }
  to{
    left:100%;
  }
}

@keyframes wiggle {
    0% { transform: rotate(0deg); }
   80% { transform: rotate(0deg); }
   85% { transform: rotate(10deg); }
   95% { transform: rotate(-10deg); }
  100% { transform: rotate(0deg); }
}

.block:nth-child(1){
  width:150px;
  height:70px;
  position:absolute;
  background:linear-gradient(120deg,hsl(0,100%,100%,0.8),white);
  top:100px;
  left:-150px;
  border-radius:200px;
  animation:move 30s infinite;
  animation-delay:0.3s;
}
.block:nth-child(2){
  width:150px;
  height:70px;
  position:absolute;
  background:linear-gradient(120deg,hsl(0,100%,100%,0.8),white);
  top:150px;
  left:-150px;
  border-radius:200px;
  animation:move 30s infinite;
  animation-delay:0.5s;
}
.block:nth-child(3){
  width:150px;
  height:70px;
  position:absolute;
  background:linear-gradient(120deg,hsl(0,100%,100%,0.8),white);
  top:150px;
  left:-150px;
  border-radius:200px;
  animation:move 30s infinite;
}

.block:nth-child(4){
  width:150px;
  height:70px;
  position:absolute;
  background:linear-gradient(120deg,hsl(0,100%,100%,0.8),white);
  top:50px;
  left:-150px;
  border-radius:200px;
  animation:move 30s infinite;
  animation-delay:5.3s;
}
.block:nth-child(5){
  width:150px;
  height:70px;
  position:absolute;
  background:linear-gradient(120deg,hsl(0,100%,100%,0.8),white);
  top:100px;
  left:-150px;
  border-radius:200px;
  animation:move 30s infinite;
  animation-delay:5.5s;
}
.block:nth-child(6){
  width:150px;
  height:70px;
  position:absolute;
  background:linear-gradient(120deg,hsl(0,100%,100%,0.8),white);
  top:100px;
  left:-150px;
  border-radius:200px;
  animation:move 30s infinite;
  animation-delay:5s;
}

.block:nth-child(7){
  width:150px;
  height:70px;
  position:absolute;
  background:linear-gradient(120deg,hsl(0,100%,100%,0.8),white);
  top:50px;
  left:-150px;
  border-radius:200px;
  animation:move 30s infinite;
  animation-delay:10.3s;
}
.block:nth-child(8){
  width:150px;
  height:70px;
  position:absolute;
  background:linear-gradient(120deg,hsl(0,100%,100%,0.8),white);
  top:100px;
  left:-150px;
  border-radius:200px;
  animation:move 30s infinite;
  animation-delay:10.5s;
}
.block:nth-child(9){
  width:150px;
  height:70px;
  position:absolute;
  background:linear-gradient(120deg,hsl(0,100%,100%,0.8),white);
  top:100px;
  left:-150px;
  border-radius:200px;
  animation:move 30s infinite;
  animation-delay:10s;
}
@keyframes move{
  from{
    left:-150px;
  }
  to{
    left:1700px;
  }
}
.sea{
  width:100%;
  position:absolute;
  background-color:#008CFF;
  bottom:0;
  display:flex;
  height: 67%;
 }
@keyframes waving{
  from{
    transform: translatex(-40px) translatey(-10px);
    }
  to{
    transform: translatex(0px) translatey(0px);
    }
  }
@keyframes waving3{
  50%{
    transform: translateY(10px)
    }
  }
@keyframes wibwub{
  50% {
    filter: drop-shadow(0 0 30px red);
  }
}
.wave:nth-child(1){
  background-image:url(https://raw.githubusercontent.com/wywnc/imgdump/2e2012a17539bcce27d6b62ff6f8a49fcfecddc2/lgtblue_wave.svg);
  background-size: 100%;
  width:120%;
  height:100%;
  top: -50px;
  position: absolute;
  background-repeat: no-repeat;
  animation: waving 4s infinite alternate;
}
.wave:nth-child(2){
  background-image:url(https://raw.githubusercontent.com/wywnc/imgdump/2e2012a17539bcce27d6b62ff6f8a49fcfecddc2/midblue_wave.svg);
  background-size: 100%;
  width:120%;
  top:-15px;
  height:100%;
  position: absolute;
  background-repeat: no-repeat;
  animation: waving 2s infinite alternate;
}
.wave:nth-child(3){
  background-image:url(https://raw.githubusercontent.com/wywnc/imgdump/2e2012a17539bcce27d6b62ff6f8a49fcfecddc2/dkblue_wave.svg);
  background-size: contain;
  width:120%;
  height:100%;
  position: absolute;
  background-repeat: no-repeat;
  animation: waving3 2.5s infinite alternate;
}
.deep{
  background:linear-gradient(#008CFF, #8C7CA2 90%, #D8826D 120%);
  position: absolute;
  width: 100%;
  height: 80%;
  bottom:0;
}

.bubble {
  --width:45px;
  --size:45px;
  width: var(--width);
  height: var(--size);
  border-radius: 100%;
  position: absolute;
  z-index:200;
  box-shadow: 0px 0px 12px #ffffff;
  animation: bub 5s infinite linear;
}

@keyframes bub{
  0% {
    top: 120vh;
    opacity: 0;
  }

50% {
    top: 50vh;
    opacity: 1;
  }
  100% {
    top: -10vh;
    transform: translateX(-100px);
    opacity: 0;
  }
}

@keyframes updown{
  from{
    top: 200px;
    
  }
  to{
    top: 10px;
    
  }
}
  </style>
</head>

</body>
</html>