ไวน์ – SSPIM

✨ PEERANUT TIPRAK

<html>
  <head>
    <title>SVG – โลกใต้น้ำ
    </title>
    <style>
      body {
  			margin:0em;
        	margin-top:2em;;
		}
      #wrap {
        width: 600px;
        height: 600px;
        top: 5%;
        position: relative;
        margin: auto;
        overflow:hidden;
      }
      .sea{
        background:#a6daeb;
        transition:all 5s;
      }
      .sea:hover{
        background:#2f4f75;
      }
      water{
        display:block;
        width:100%;
        height:400px;
        background:#000;
        opacity:0.1;
        position:absolute;
        bottom:0;
        left:0;
      }
      water.water-2{
        height:200px;
        opacity:0.1;
      }
      bubble{
        display:block;
        border-radius:100px;
        width:20px;
        height:20px;
        background:#fff;
        position:absolute;
        bottom:30px;
        left:100px;
      }
      bubble.b2{
        left:160px;
        zoom:2;
      }
      bubble.b3{
        left:100px;
        zoom:1;
      }
      .bbgroup2{
        transform:scale(2);
        position:absolute;
        right:500px;
        bottom:-200px;
        opacity:.5;
      }
      bubble.ani1{
        animation: bbx1 10s infinite  
          ,bby1 6s infinite ease-out
          ,bbs1 5s infinite alternate,colorful 2s infinite;}
      bubble.ani2{
        animation: bbx1 13s infinite 1s 
          ,bby1 4s infinite linear
          ,bbs2 6s infinite alternate,colorful 5s infinite;}
      bubble.ani3{
        animation: bbx1 5s infinite 2s 
          ,bby1 12s infinite ease-out
          ,bbs1 9s infinite alternate,colorful 8s infinite;}
      /* -Bubble */
      @keyframes bbx1{
        0%{transform:translateX(0px)}
        5%{transform:translateX(10px)}
        10%{transform:translateX(-20px)}
        15%{transform:translateX(25px)}
        25%{transform:translateX(-35px)}
        35%{transform:translateX(40px)}
        50%{transform:translateX(-50px)}
        60%{transform:translateX(60px)}
        70%{transform:translateX(-77px)}
        85%{transform:translateX(88px)}
        100%{transform:translateX(-95px)}
      }
      @keyframes bby1{
        from{bottom:0px}
        to{bottom:700px}
      }
      @keyframes bbs1{
        from{opacity:1}
        to{opacity:0.2}
      }
      @keyframes colorful{
        0%{background:	#eff5d1;}
        25%{background:	#edbcba;}
        50%{background:#ee96a8;}
        75%{background:#a6daeb;}
        100%{background:#7ba1c8;}
      }
      /* fish */
      fish {
        width: 200px;
        height: 150px;
        display: block;
        top: 0;
        left: 0;
      transform:translate(0px,0px);
        position: absolute;
      /*   background: purple; */
      }
      fish svg ,sq svg {
        position: absolute;
      }
      fish .body {
        width: 75%;
        left: 25%;
        top: 0%;
        transform-origin: center left;
      }
      fish .tail {
        width: 25%;
        left: 0%;
        top: 16.666%;
        transform-origin: center right;
      }
      /* -Fist Tail */
      @keyframes atail {
        0% {
          transform: scaleY(0.8) rotateY(-45deg);
          opacity: 0.4;
        }
        33% {
          transform: scaleY(1) rotateY(0deg);
          opacity: 0.7;
        }
        100% {
          transform: scaleY(1.2) rotateY(45deg);
          opacity: 1;
        }
      }

/* -Fish Body */
      @keyframes abody {
        0% {
          transform: rotateY(30deg);
        }
        100% {
          transform: rotateY(-30deg);
        }
      }

/* -Fish */
      @keyframes swim {
        from {
          transform: rotateZ(-15deg);
        }
        to {
          transform: rotateZ(15deg);
        }
      }

/* FISH FISH FISH*/
      .f1 {
        color: #ee96a8 !important;
        fill: #ee96a8 !important;
        animation: f1 9s infinite linear;
        top: 0;
        left: 200px;
      }
      .f2 {
      /*   ee96a8 */
        animation: f1 23s infinite linear;
        top: 100x;
        left: 200px;
      }
      .f3 {
        animation: f2 13s infinite linear;
        top: 100x;
        left: 200px;
        color: #eff5d1 !important;
        fill: #eff5d1 !important;
      }
      .f4 {
        animation: f1 15s infinite linear;
        color: #7ba1c8 !important;
        fill: #7ba1c8 !important;
        top: 450x;
        left: 220px;

}
      .f5 {
        animation: f2 13s infinite linear;
        top: 100x;
        left: 200px;
      }
      .f6 {
        animation: f2 50s infinite linear;
        top: 100x;
        left: 200px;
      }
      @keyframes f1 {
        0% {transform:scale(1,1);top:10px;left:-200px}
        35% { transform:scale(0.6,0.6);top:120px;left:900px}
         40% {transform:scale(-0.3,0.3);top:300px;left:900px}
        100% { transform:scale(-0.7,0.7);top:500px;left:-400px}
      }

@keyframes f2 {
        0% {transform:scale(1,1);top:400px;left:-200px}
        35% { transform:scale(0.6,0.6);top:120px;left:900px}
         40% {transform:scale(-0.3,0.3);top:300px;left:900px}
        100% { transform:scale(-1,1);top:100px;left:-400px}
      }

/* Add Aniamtion */
      .swim {
        animation: swim 1s infinite linear alternate;
      }
      .tail.ani1 {
        animation: atail 0.2s infinite linear alternate;
      }
      .tail.ani2 {
        animation: atail 0.4s infinite linear alternate;
      }
      .tail.ani3 {
        animation: atail 0.6s infinite linear alternate;
      }
    </style>
  </head>

</div>
</body>
</html>