น้องตู้ปลา

✨ Jabont

<html>
<head>
	<title>น้องตู้ปลา</title>
  <link rel="stylesheet" href="//jabont.com/jayss/jayss.css">
  <style>
    body {
  margin: 0;
}
#wrap {
  width:100%;
  height: 100vh;
  position: relative;
  margin: auto;
  overflow:hidden;
}
water{
  display:block;
  width:100%;
  height:400px;
  background:#000;
  opacity:0.1;
  position:absolute;
  bottom:0;
  left:0;
}
bubble{
  display:block;
  border-radius:100px;
  width:20px;
  height:20px;
  background:#fff;
  position:absolute;
  bottom:30px;
  left:100px;
}
bubble.b2{
  left:130px;
  zoom:1.3;
}
.bbgroup2{
  transform:scale(2);
  position:absolute;
  right:500px;
  bottom:-200px;
  opacity:.5;
}
water.water-2{
  height:200px;
  opacity:0.1;
}
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;
}
sq .body{
  width:10%;
}
sq.sq1{
  left:500px;
  width:100%;
  bottom:720px;
  display:block;
  position:absolute;
  animation:sq1 24s infinite;
}
sq .body{
  animation:sq2 .43s infinite alternate;
}
sq.sq2{
  left:300px;
  width:100%;
  bottom:720px;
  opacity:.5;
  display:block;
  position:absolute;
  animation:sq1 11s infinite;
}

/* Wide */
.wide1 {
  transform: scaleX(1.2);
}
.wide2 {
  transform: scaleX(1.4);
}
.wide4 {
  transform: scaleX(1.6);
}
/* Zoom */
.z1 {
  zoom: 1.2;
}
.z2 {
  zoom: 1.4;
}
.z3 {
  zoom: 1.6;
}
.z4 {
  zoom: 1.8;
}
.z5 {
  zoom: 2;
}
/* 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;
}
.body.abody1 {
  animation: abody 1s infinite linear alternate;
}

bubble.ani1{
  animation: bbx1 10s infinite  
    ,bby1 4s infinite ease-out
    ,bbs1 5s infinite alternate;}
bubble.ani2{
  animation: bbx1 15s infinite 1s 
    ,bby1 9s infinite linear
    ,bbs2 6s infinite alternate;}
bubble.ani3{
  animation: bbx1 7s infinite 2s 
    ,bby1 17s infinite ease-out
    ,bbs1 9s infinite alternate;}
/* Animation */

/* -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 {
  animation: f1 9s infinite linear;
  top: 0;
  left: 200px;
}
.f2 {
  animation: f1 23s infinite linear;
  top: 100x;
  left: 200px;
}
.f3 {
  animation: f2 13s 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}
}
@keyframes sq1{
  from{bottom:0px};
  to{bottom:100px};
}
@keyframes sq2{
  from{transform:scaleX(1.2)};
  to{transform:scaleX(1.6)};
}
/* -Bubble */
@keyframes bbx1{
  0%{transform:translateX(0px)}
  5%{transform:translateX(10px)}
  10%{transform:translateX(-20px)}
  15%{transform:translateX(30px)}
  25%{transform:translateX(-40px)}
  35%{transform:translateX(50px)}
  50%{transform:translateX(-60px)}
  60%{transform:translateX(70px)}
  70%{transform:translateX(-80px)}
  85%{transform:translateX(90px)}
  100%{transform:translateX(-100px)}
}
@keyframes bby1{
  from{bottom:0px}
  to{bottom:700px}
}
@keyframes bbs1{
  from{opacity:1}
  to{opacity:0}
}
@keyframes bbs2{
  from{opacity:1}
  to{opacity:0}
}
.sea{
  background:#39f;
  transition:all 3s;
}
.sea:hover{
  background:#049;
}
  </style>
</head>
<body>

<div id="wrap" class="sea">
  
  <sq class="sq1 cl-grey-3">
    <svg class="body" viewbox="0 0 12 10">
  <path d="m3 3 l3 -3 l3 3 h-1 l4 6 l-1 1 h-10 l-1 -1 l4 -6 z"></path>
  </svg>
  </sq>
    <sq class="sq2 cl-grey-2">
    <svg class="body" viewbox="0 0 12 10">
  <path d="m3 3 l3 -3 l3 3 h-1 l4 6 l-1 1 h-10 l-1 -1 l4 -6 z"></path>
  </svg>
  </sq>
  
  <fish class="f1 cl-amber-6">
    <svg class="body swim" viewbox="0 0 6 6">
  <path d="m0 3 l3 -3 l3 3 l-3 3 z"></path>
  </svg>
    <svg class="tail ani1" viewbox="0 0 4 8">
  <path d="m0 0 l4 4 l-4 4 z"></path>
  </svg>
  </fish>

</body>
</html>