QE B Kwan (Copy 12572)

✨ TADA TEERAWARAKUL

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>QE B Kwan</title>
    <style>
      body{
        
        background:#333;
        margin:0;
        font-family:sans-serif;
      }
      /* .boat{
        transform:translatey(-400px);
        animation:bid 5s linear infinite alternate;
      } */
      #my_picture{
        width:600px;
        height:400px;
        /* background:hsl(26,28%,55%,1); */
        /* background-image:radial-gradient(hsl(30,40%,53%,.7), hsl(26,28%,55%,1)); */
        background: url(https://cdn.discordapp.com/attachments/468800874924474369/940611330497454120/Anime2BLake2BBackground2B1.png);
        background-repeat: no-repeat;
        background-size: cover;
        margin:auto;
        margin-top:calc(50vh - 200px);
        border-radius:5px;
        overflow:hidden;
        box-shadow:0px 10px 20px #0003;
        position:relative;
        perspective:1000px;
        transition:background .3s;
      }
    #oval {
      --w:400px;
      --h:200px;
      position:absolute;
      width: var(--w);
      height: var(--h);
      z-index:-3;
      /* background: hsl(185, 40%, 50%); */
      /* border-radius: calc(var(--w)/2) / calc(var(--h)/2); */
      top:calc(50% - (var(--h)/2));
      left:calc(50% - (var(--w)/2));
      /* box-shadow:0px 0px 10px hsl(187, 50%, 20%) */
    }

#boat {
      position:absolute;
      z-index:10000;
      animation: boat-move 2s linear infinite alternate;
      
    }

div #boat:before,
    div #boat:after {
      content: '';
      position: absolute;
      z-index: -1;
      transform: translate(180px, 125px) rotateX(75deg);
      border-radius: 100%;
      opacity: 0;
      width: 75%;
      height: 75%;
      border: 5px solid white;
      animation: dripple 2s ease-out 1s infinite;
    }

div #boat:after {
      animation: dripple 2s ease-in 1.7s infinite;
    }

#boat-inverse {
      width:100%;
      height:100%;
      opacity:0.6;
      position:absolute;
      transform:scaley(-1);
      animation: boat-move2 2s linear infinite alternate;
      z-index:0;
    }
    #tri-up {
      border-left: 30px solid transparent;
      border-right: 30px solid transparent;
      border-bottom: 40px solid hsl(10, 60%, 90%);
      position:absolute;
      left:236px;
      top:120px;
    }

#trapezoid {
      border-top: 50px solid hsl(10, 60%, 85%);
      border-left: 45px solid transparent;
      border-right:45px solid transparent;
      height: 0px;
      width: 100px;
      position:absolute;
      top:160px;
      left:170px;
    }

#inner-tri {
      border-left: 90px solid transparent;
      border-right: 90px solid transparent;
      border-bottom: 30px solid hsl(10, 60%, 80%);
      position:absolute;
      left:175px;
      top:130px
    }
    .rain {
     width: 100%;
     height: 100%;
     background: url(http://pngimg.com/uploads/rain/rain_PNG13470.png);
     position: absolute;
     opacity:0.3;
     animation: rain 0.5s linear infinite;
     z-index: 1;
    }
    @keyframes rain{
       0%{
         background-position: 0 0;
       }
       100%{
         background-position: -10% 100%;
       }
     }

@keyframes dripple {
      0% {
        width: 150px;
        height: 150px;
        opacity: 1;
      }
    
      100% {
        width: 200px;
        height: 200px;
        opacity: 0;
      }
    }
    /* .raindrop{
      width:10px;
      height:1px;
      position:absolute;
      z-index:100;
      left:calc((var(--r) * 60px));
      border-bottom: 3px solid #fff8;
      transform:rotate(90deg);
      animation:raining 2s calc(var(--r)  * .16s) linear infinite;
    } */
     /* .raindrop:nth-child(1){
        --r:1;
      }
      .raindrop:nth-child(2){
        --r:2;
      }
      .raindrop:nth-child(3){
        --r:3;
      }
      .raindrop:nth-child(4){
        --r:4;
      }
      .raindrop:nth-child(5){
        --r:5;
      }
      .raindrop:nth-child(6){
        --r:6;
      }
      .raindrop:nth-child(7){
        --r:7;
      }
      .raindrop:nth-child(8){
        --r:8;
      }
      .raindrop:nth-child(9){
        --r:9;
      }
      .raindrop:nth-child(10){
        --r10;
      } */
      
    /* @keyframes bid{
      from{transform:skew(0deg);
        
      }
      to{transform:skewx(40deg);
        
      }
    } */
    /* @keyframes raining{
      from{
        transform:rotate(90deg) translatex(-10px) ;
      }
      to{
        transform:rotate(90deg) translatex(400px);
      }
    } */
    
    @keyframes boat-move{
      0%{
        transform: rotate(0deg) translatex(10px);
      }
      25%{
        transform: rotate(-2deg) translatex(20px);
      }
      50%{
        transform: rotate(0deg) translatex(30px);
      }
      75%{
        transform: rotate(2deg) translatex(40px);
      }
      100%{
        transform: rotate(0deg) translatex(50px);
      }
    }
    @keyframes boat-move2{
      0%{
        transform: rotate(0deg) translatex(10px) scaley(-1)  translatey(-20px);
      }
      25%{
        transform: rotate(-2deg) translatex(20px) scaley(-1) translatey(-20px);
      }
      50%{
        transform: rotate(0deg) translatex(30px)scaley(-1) translatey(-20px);
      }
      75%{
        transform: rotate(2deg) translatex(40px)scaley(-1) translatey(-20px);
      }
      100%{
        transform: rotate(0deg) translatex(50px)scaley(-1) translatey(-20px);
      }
    }
    @keyframes boat-move-in{
      0%{
        transform: rotate(180deg)  translatey(-9px) translatex(60px);
      }
      25%{
        transform: rotate(176deg)  translatey(-9px) translatex(50px);
      }
      50%{
        transform: rotate(180deg)  translatey(-20px) translatex(40px);
      }
      75%{
        transform: rotate(184deg)  translatey(-21px) translatex(30px);
      }
      100%{
        transform: rotate(180deg)  translatey(-22px) translatex(20px);
      }
    }
    </style>
  </head>
  <body>
  <div id="my_picture">
    <div class="rain"></div>
    
    <div id="oval"></div>
    
    <div id="boat">
      <div id="inner-tri"></div>
      <div id="tri-up"></div>
      <div id="trapezoid"></div>
    </div>
    <div id="boat-inverse">
      <div id="inner-tri"></div>
      <div id="tri-up"></div>
      <div id="trapezoid"></div>
    </div>
  </div>
  </body>
</html>