Picture Family

✨ Oof Thiraphop

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <link rel="stylesheet" href="style.css">
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div class="picture">
      <div class="bubble">
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
      </div>
      <div class="witch">
        <div class="broom">
          <div class="jabon">

</div>
        </div>
      </div>
      <div class="eyes">
        <div class="ball">
          <div class="shadow"></div>
          <div class="iris"></div>
        </div>
      </div>
      <div class="spider">
        <div class="line">
        </div>
        <div class="lucas">
          <div class="pao"></div>
        </div>
      </div>
      <div class="char">
        <div class="char1">
          <div class="face"></div>
        </div>
        <div class="char2">
          <div class="frame"></div>
        </div>
        <div class="char3">
          <div class="ppim"></div>
        </div>
        <div class="char4">
          <div class="toen"></div>
        </div>
        <div class="char5">
          <div class="kem"></div>
        </div>
        <div class="char6">
          <div class="wave"></div>
        </div>
        <div class="char7">
          <div class="jing"></div>
        </div>
        <div class="char8">
          <div class="fook"></div>
        </div>
      </div>
    </div>
  </body>
</html>

}
@keyframes boom {
  0% {
    opacity: 0;
    transform-origin: 50% 50%;
    transform: scale(1, 1) translate(0, 0);
    filter: blur(0px);
  }
  15%{
        opacity: 100%;
  }
  50%{
    transform: translate(0, -100px);
  }
  100% {
    opacity: 0;
    transform-origin: 50% 50%;
    transform: scale(2, 2) translate(0, -200px);
    filter: blur(20px);
  }
}
.dot:nth-child(1){
  left: 0%;
  width: 24px;
  height: 24px;
}
.dot:nth-child(2){
  left: 5%;
  width: 48px;
  height: 48px;
  animation-delay: 3s;
}
.dot:nth-child(3){
  left: 35%;
  width: 36px;
  height: 36px;
  animation-delay: 1.5s;
}
.dot:nth-child(4){
  left: 10%;
  width: 24px;
  height: 24px;
  animation-delay: 0.8s;
}
.dot:nth-child(5){
  left: 30%;
  width: 48px;
  height: 48px;
  animation-delay: 2s;
}
.dot:nth-child(6){
  left: 15%;
  width: 48px;
  height: 48px;
  animation-delay: 2.5s;
}
.dot:nth-child(7){
  left: 25%;
  width: 36px;
  height: 36px;
  animation-delay: 4s;
}
.dot:nth-child(8){
  left: 20%;
  width: 24px;
  height: 24px;
  animation-delay: 3.5s;
}
.char1{
  position: absolute;
  top: 60%;
  left: 5%;
  width: 240px;
  height: 240px;
  animation: run1 6s ease-in-out infinite;
  transform: translate(500px, 0);
  background: url(https://cdn.discordapp.com/attachments/781436715998773253/810032147595264050/Idle_1.png);
  background-repeat: no-repeat;
  background-size: contain;
}
@keyframes run1 {
  0%{
    background: url(https://cdn.discordapp.com/attachments/781436715998773253/809833676455673916/Webp.net-gifmaker.gif);
    background-repeat: no-repeat;
    background-size: cover;
    transform: translate(0, 0) scaleX(1);

}
  25%{
    background: url(https://cdn.discordapp.com/attachments/781436715998773253/809833676455673916/Webp.net-gifmaker.gif);
    background-repeat: no-repeat;
    background-size: cover;
    transform: translate(200px, 0) scaleX(-1);
  }
  50%{
    background: url(https://cdn.discordapp.com/attachments/781436715998773253/809833676455673916/Webp.net-gifmaker.gif);
    background-repeat: no-repeat;
    background-size: cover;
    transform: translate(0, 0);
  }
  60%{
    background: url(https://cdn.discordapp.com/attachments/781436715998773253/809833676455673916/Webp.net-gifmaker.gif);
    background-repeat: no-repeat;
    background-size: cover;
    transform: translate(0, -150px);
  }
  70%{
    background: url(https://cdn.discordapp.com/attachments/781436715998773253/809833676455673916/Webp.net-gifmaker.gif);
    background-repeat: no-repeat;
    background-size: cover;
    transform: translate(0, 0);
  }
  80%{
    background: url(https://cdn.discordapp.com/attachments/781436715998773253/809833676455673916/Webp.net-gifmaker.gif);
    background-repeat: no-repeat;
    background-size: cover;
    transform: translate(0, -100px);
  }
  90%{
    background: url(https://cdn.discordapp.com/attachments/781436715998773253/809833676455673916/Webp.net-gifmaker.gif);
    background-repeat: no-repeat;
    background-size: cover;
    transform: translate(0, 0);
  }
  100%{
    background: url(https://cdn.discordapp.com/attachments/781436715998773253/809833676455673916/Webp.net-gifmaker.gif);
    background-repeat: no-repeat;
    background-size: cover;
    transform: translate(0, 0);
  }
}
.char2{
  position: absolute;
  top: 60%;
  left: 60%;
  width: 240px;
  height: 240px;
  animation: run2 2s ease-in-out;
  transform: translate(100px, 0);
  background: url(https://cdn.discordapp.com/attachments/781436715998773253/810059942428934154/Idle_1.png);
  background-repeat: no-repeat;
  background-size: contain;
}
@keyframes run2 {
  0%{
    background: url(https://cdn.discordapp.com/attachments/729270267506983012/810058948894785547/char2.gif);
    background-repeat: no-repeat;
    background-size: cover;
    transform: translate(0, 0);

}
  100%{
    background: url(https://cdn.discordapp.com/attachments/729270267506983012/810058948894785547/char2.gif);
    background-repeat: no-repeat;
    background-size: cover;
    transform: translate(100px, 0);
  }
}
.char3{
  position: absolute;
  top: 60%;
  left: 36%;
  width: 200px;
  height: 200px;
  animation: run3 5s ease-in-out;
  transform: translate(300px, 0);
  background: url(https://cdn.discordapp.com/attachments/781436715998773253/810059772870131763/Idle_1.png);
  background-repeat: no-repeat;
  background-size: contain;
}
@keyframes run3 {
  0%{
    background: url(https://cdn.discordapp.com/attachments/729270267506983012/810058953256992768/char3.gif);
    background-repeat: no-repeat;
    background-size: contain;
    transform: translate(0, 0);

}
  100%{
    background: url(https://cdn.discordapp.com/attachments/729270267506983012/810058953256992768/char3.gif);
    background-repeat: no-repeat;
    background-size: contain;
    transform: translate(300px, 0);
  }
}
.char4{
  position: relative;
  top: 400px;
  left: -10px;
  width: 240px;
  height: 240px;
  animation: run4 4s ease-in-out infinite alternate;
  transform: translate(500px, 0);
  background: url(https://cdn.discordapp.com/attachments/729270267506983012/810169356570198016/char4.gif);
  background-repeat: no-repeat;
  background-size: contain;
}
@keyframes run4{
  0%,20%,40%,50%{
    transform: scale(1, 1) translateX(0);
  }
  10%,30%{
    transform: scale(1.1, 1.1) translateX(0);
  }
  100%{
    transform: scale(1, 1) translateX(1000px);
  }
}
.char5{
  position: absolute;
  top: 30%;
  left: 65%;
  width: 240px;
  height: 240px;
  animation: jump 2s ease-in-out infinite alternate;
  transform: translate(500px, 0);
  background: url(https://cdn.discordapp.com/attachments/781436715998773253/810032147595264050/Idle_1.png);
  background-repeat: no-repeat;
  background-size: contain;
}
@keyframes jump{
  0%{
    transform: translate3d(0,0,0) scale3d(1.3,1,1);
    background: url(https://cdn.discordapp.com/attachments/729270267506983012/810169373490544671/char7.gif);
    background-repeat: no-repeat;
    background-size: contain;
    }
  40%{
    transform: translate3d(0,-50px,0) scale3d(1,1,1);
    background: url(https://cdn.discordapp.com/attachments/729270267506983012/810169373490544671/char7.gif);
    background-repeat: no-repeat;
    background-size: contain;
  }
  100%{
    transform: translate3d(0,-100px,0) scale3d(1,1,1);
    background: url(https://cdn.discordapp.com/attachments/729270267506983012/810169373490544671/char7.gif);
    background-repeat: no-repeat;
    background-size: contain;
  }
}
.char6{
  position: absolute;
  top: 60%;
  left: 5%;
  width: 240px;
  height: 240px;
  animation: run6 10s ease-in-out infinite;
  transform: translate(500px, 0);
  background: url(https://cdn.discordapp.com/attachments/729270267506983012/810169370063798283/char6.gif);
  background-repeat: no-repeat;
  background-size: contain;
}
@keyframes run6{
  0%{
    background-repeat: no-repeat;
    background-size: cover;
    transform: translate(0, 0);

}
  100%{
    background-repeat: no-repeat;
    background-size: cover;
    transform: translate(500px, 0);
  }
}
.char7{
  position: absolute;
  top: 60%;
  left: 5%;
  width: 240px;
  height: 240px;
  animation: run7 10s ease-in-out;
  transform: translate(500px, 0);
  background: url(https://cdn.discordapp.com/attachments/729270267506983012/810169371321958400/char8.gif);
  background-repeat: no-repeat;
  background-size: contain;
}
@keyframes run7 {

}
.char8{
  position: absolute;
  top: 0%;
  left: 10%;
  width: 240px;
  height: 240px;
  transform: translate(500px, 0);
  background: url(https://cdn.discordapp.com/attachments/729270267506983012/810184181064794204/cartoon-worker-trying-to-climb-rope-training-vector-cartoon-worker-trying-to-climb-rope-training-vec.png);
  background-repeat: no-repeat;
  background-size: contain;
}
@keyframes sling {

}
.char9{
  position: absolute;
  top: -9%;
  left: 20%;
  width: 240px;
  height: 240px;
  background: url(https://media3.giphy.com/media/C8g7AVX2ZkMcF1FlzB/giphy.gif);
  background-repeat: no-repeat;
  background-size: contain;
}
.broom{
  position: absolute;
  background: url(https://cdn.discordapp.com/attachments/729270267506983012/810202000212885504/witch_PNG105.png);
  width: 240px;
  height: 360px;
  background-repeat: no-repeat;
  background-size: contain;
  top: 30%;
  left: 80%;
  animation: fly 5s ease-in-out infinite;
  z-index: 10;
}
@keyframes fly{
  0%{
    transform: translate(0) scaleX(1);
  }
  45%{
    transform: translate(-1000px) scaleX(1);
  }
  50%{
    transform: translate(-1000px) scaleX(-1);
  }
  95%{
    transform: translate(0px) scaleX(-1);
  }
  100%{
    transform: translate(0px) scaleX(1);
  }
}
.eyes{
  position: absolute;
  top: 38.5%;
  left: 78.5%;
  width: 120px;
  height: 120px;
  perspective: 1200px;
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
  transform: rotateY(0.01deg);
}
.ball{
  display: inline-block;
  width: 50%;
  height: 50%;
  margin: 0;
  border-radius: 50%;
  position: relative;
  background: radial-gradient(circle at 50% 40%, #fcfcfc, #efeff1 66%, #9b5050 100%);
}
.iris{	
  width: 40%;
  height: 40%;
  margin: 30%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #208ab4 0%, #6fbfff 30%, #4381b2 100%);
  transform: translateX(34px) translateY(-30px) skewX(15deg) skewY(2deg);
  position: absolute;
  animation: move_eyes 5s ease-out infinite;
}
@keyframes move_eyes {
  0% {
    transform: none;
  }
  20% {
    transform: translateX(-34px) translateY(15px) skewX(15deg) skewY(-10deg) scale(0.95);
  }
  25%, 44% {
    transform: none;
  }
  50%, 60% {
    transform: translateX(34px) translateY(-20px) skewX(5deg) skewY(2deg) scaleX(0.95);
  }
  66%, 100% {
    transform: none;
  }
}
.spider{
  display: flex;
  position: absolute;
  width: 10%;
  height: 40%;
  left: 10%;
  justify-content: center;
  align-items: center;
}
.line{
  position: absolute;
  width: 2%;
  height: 100%;
  background: white;
}
.lucas{
  position: absolute;
  width: 60%;
  height: 60%;
  background: url(https://www.pngkey.com/png/full/299-2998143_spider-clipart-kid-png-vector-graphics.png);
  background-size: contain;
  background-repeat: no-repeat;
  animation: drop 3s ease-in-out infinite alternate;
  overflow: hidden;
}
@keyframes drop{
  0%{
    transform: translate(0, 0);
  }
  100%{
    transform: translate(0, 120px);
  }
}
.face{
  width: 160px;
  height: 160px;
  background: url(https://cdn.discordapp.com/attachments/798209325406748672/810143441228398622/f908e9d804aea7dc.png);
  background-repeat: no-repeat;
  background-size: contain;
}
.pao{
  width: 70px;
  height: 70px;
  background: url(https://cdn.discordapp.com/attachments/798209325406748672/810148942875721768/27_20210213210157.PNG);
  background-repeat: no-repeat;
  background-size: contain;
}
.fook{
  position:absolute;
  top:28%;
  left:24%;
  width: 65px;
  height: 65px;
  background: url(https://cdn.discordapp.com/attachments/798209325406748672/810143444639023194/df01787564da412d.png);
  background-repeat: no-repeat;
  background-size: contain;
}
.wave{
  position:absolute;
  top:5%;
  left:30%;
  width: 130px;
  height: 130px;
  background: url(https://cdn.discordapp.com/attachments/798209325406748672/810143444847558665/077f19f072059b0b.png);
  background-repeat: no-repeat;
  background-size: contain;
}
.toen{
  position:absolute;
  top:0%;
  left:40%;
  width: 80px;
  height: 80px;
  background: url(https://cdn.discordapp.com/attachments/798209325406748672/810143436195495956/84168c766b45c8d4.png);
  background-repeat: no-repeat;
  background-size: contain;
}
.jing{
  position:absolute;
  top:30%;
  left:40%;
  width: 80px;
  height: 80px;
  background: url(https://cdn.discordapp.com/attachments/798209325406748672/810143444164280360/3509710a7d0a7052.png);
  background-repeat: no-repeat;
  background-size: contain;
}
.kem{
  position:absolute;
  top:8%;
  left:30%;
  width: 80px;
  height: 80px;
  background: url(https://cdn.discordapp.com/attachments/798209325406748672/810143445405663232/9d27abb0406e837e.png);
  background-repeat: no-repeat;
  background-size: contain;
}
.frame{
  position:absolute;
  top:10%;
  left:30%;
  width: 160px;
  height: 160px;
  background: url(https://cdn.discordapp.com/attachments/798209325406748672/810143447637164032/7d73fae40c93924d.png);
  background-repeat: no-repeat;
  background-size: contain;
}
.ppim{
  position:absolute;
  top:10%;
  left:20%;
  width: 190px;
  height: 190px;
  background: url(https://cdn.discordapp.com/attachments/729270267506983012/810195362991046666/68594564_2476178892439491_5712727350345465856_o-removebg-preview.png);
  background-repeat: no-repeat;
  background-size: contain;
}
.jabon{
  position:absolute;
  top: 8%;
  left: 10%;
  width: 60px;
  height: 600px;
  background: url(https://cdn.discordapp.com/attachments/798209325406748672/810158955766087700/15780717_10210207009884719_7770875511715186763_n-removebg-preview.png);
  background-repeat: no-repeat;
  background-size: contain;
}

</styles>