<div class='Wrapper'>
  <div class='copyrights'>
    <a target='_blank' href='https://www.facebook.com/100047606226665'>i</a>
    <p>created by Muhammad Saleh</p> 
  </div>
  <div class='Table'></div>
  <div class='box box1'><span></span></div>
  <div class='box box2'><span></span></div>
  <div class='stakc'></div>
  <div class='Tank'>
    <div class='Water'>
      <div class='bubbles'> 
        <span></span><span></span><span></span><span></span><span></span><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p>
      </div>
      <div class='Fish'>
        <div class='F-body'><span></span></div>
        <div class='F-mouse'>
          <span></span>
          <span></span> 
        </div>
        <div class='F-eye'><div class='F-ball'></div></div>
        <div class='F-tail'></div>
        <div class='F-sheem'><p></p><p></p></div>
      </div>
    </div>
  </div>
</div>


body {
  background-color:#030400
}

.Wrapper {
 background:url(http://home.bt.com/images/5-things-you-need-to-know-before-painting-freshly-plastered-walls-136417087143802601-170405121652.jpg) repeat;
  background-size:cover;
  width:500px;
  margin:0 auto;
  position:relative;
  border:5px solid rgba(0.0.0.0.1);
  perspective:500px;
  overflow:hidden;
  text-align:center;
  height:100vh;
  min-height:700px;
  max-height:900px
}

/* =======
Table
==========*/
.Table {
  width:320px;
  height:100px;
  background:url(http://www.designbolts.com/wp-content/uploads/2013/02/Free-Seamless-Wood-Textures-Patterns-For-3D-Mapping-2.jpg) no-repeat;
  background-size:cover;
  position:absolute;
  bottom:155px;
  left:90px;
  transform:rotateX(75deg);
  border-bottom:15px solid #896B44;
  box-shadow:0 7px 5px -5px #AE8340 ,40px 0 45px -25px #AE8340 inset ,-40px 0 45px -25px #AE8340 inset;
  border-radius:60px;
  z-index:5
}
.box {
  width:300px;
  height:100px;
 background:url(http://www.designbolts.com/wp-content/uploads/2013/02/Free-Seamless-Wood-Textures-Patterns-For-3D-Mapping-2.jpg) no-repeat;
  background-size:cover;
  position:absolute;
  left:100px;
  box-shadow:0 8px 7px -6px #53380A ,0px 12px 0 #876C42 ,-20px 0 60px #A67A35 inset ,20px 0 60px #A67A35 inset,0 30px 50px #FFFDDD inset ,2px 5px 11px #684714;
  z-index:1;
  text-align:center
}
.box1 {
  bottom:92px
}
.box2 {
  bottom:-15px
}
.box span {
  width:20px;
  height:20px;
  background:#826336;
  position:absolute;
  border-radius:100%;
  margin:35px 0 0;
  box-shadow:0 0 0 2px #A68440 ,0 0 0 5px #E3BF74 ,4px 3px 4px 2px #6A4E1C ,-4px -3px 4px 2px #6A4E1C inset ,-10px -7px 1px 9px #B6904F inset
}

/* =======
Tank
==========*/
.Tank {
  background-color:rgba(255,255,255,0.2);
  width:200px;
  height:180px;
  border-radius:100%;
  position:absolute;
  bottom:210px;
  overflow:hidden;
  left:150px;
  -webkit-filter:blur(200);
  z-index:5;
  box-shadow:5px 5px #409ab4 ,-5px 5px #409AB4 ,-10px -22px #82F0FF inset ,-10px -72px #FFF inset,0 -79px 0 -5px #91C0CE inset
}
.stakc {
  width:120px;
  height:30px;
  position:absolute;
  box-shadow:1px 1px 1px 4px #FFF ,0 0 0 5px #409ab4;
  border-radius:100%;
  left:190px;
  z-index:10;
  bottom:360px
}
.Water {
  background:radial-gradient(#8ad7ed 20%,#54b7d3 70%);
  width:102%;
  height:150px;
  border-radius:1000% 1000% 3000px 3000px;
  margin-top:30px;
  margin-left:-3px;
  position:absolute;
  opacity:.8
}
.Water:before {
  content:'';
  position:absolute;
  width:80%;
  height:40px;
  background:rgba(255,255,255,0.5);
  left:20px;
  top:-5px;
  border-radius:100%;
  margin:px 0 0;
  z-index:9;
  animation:1s WaterLight Linear ALTERNATE infinite
}
@keyframes WaterLight {
  100% {
    transform:rotateX(50deg)
  }
}

/* Bubbles */
.bubbles {
  width:100%;
  height:100%;
  position:relative;
  overflow:hidden
}

.bubbles {
  z-index:10
}

.bubbles span {
  border-radius:100%;
  position:absolute;
  display:block
}

.bubbles span:nth-child(1) {
  border:2px solid #fff;
  width:1px;
  height:1px;
  left:50px;
  top:50px;
  animation:2s bubbles linear infinite
}

.bubbles span:nth-child(2) {
  border:3px solid #fff;
  width:2px;
  height:2px;
  left:50px;
  top:110px;
  animation:3s bubbles linear infinite
}

.bubbles span:nth-child(3) {
  border:2px solid #fff;
  width:3px;
  height:3px;
  left:120px;
  top:90px;
  animation:1s bubbles linear infinite alternate
}

.bubbles span:nth-child(4) {
  border:1px solid #fff;
  width:2px;
  height:3px;
  left:150px;
  top:120px;
  animation:.5s bubbles linear infinite alternate
}

.bubbles span:nth-child(5) {
  border:1px solid #fff;
  width:2px;
  height:3px;
  left:150px;
  top:90px;
  animation:5s bubbles linear infinite
}

/* Bubbles Noise*/
.bubbles p {
  width:2px;
  height:2px;
  background-color:#fff;
  border-radius:100%;
  position:absolute;
  opacity:.5
}

.bubbles p:nth-of-type(1) {
  top:90px;
  right:20px;
  animation:2s bubbles linear infinite
}

.bubbles p:nth-of-type(2) {
  top:100px;
  right:40px;
  animation:3s bubbles linear infinite
}

.bubbles p:nth-of-type(3) {
  top:100px;
  right:90px;
  animation:4s bubbles linear infinite
}

.bubbles p:nth-of-type(4) {
  top:70px;
  right:130px;
  animation:5s bubbles linear infinite
}

.bubbles p:nth-of-type(5) {
  top:90px;
  right:180px;
  animation:1s bubbles linear infinite alternate
}

.bubbles p:nth-of-type(6) {
  top:150px;
  right:150px;
  animation:3s bubbles linear infinite
}

.bubbles p:nth-of-type(7) {
  top:140px;
  right:92px;
  animation:2s bubbles linear infinite
}

.bubbles p:nth-of-type(8) {
  top:130px;
  right:122px;
  animation:2s bubbles linear infinite
}

@keyframes bubbles {
30% {
  margin-left:-20px
}

60% {
  margin-left:0
}

100% {
  margin-left:20px;
  top:20px;
  opacity:0
}
}

/* =======
Fish
==========*/
.Fish {
  width:40%;
  height:40px;
  position:relative;
  bottom:80px;
  left:150px;
  border-radius:100%;
  animation:7s Fish linear infinite
}

@keyframes Fish {
  10% {
    transform:scale(1.3);
    left:50px
  }
  40% {
    transform:rotateY(180deg) scale(1);
    left:-120px
  }
  50% {
    transform:rotateY(180deg) scale(0.7);
    left:0;
    bottom:100px
  }
  70% {
    left:200px
  }
  97% {
    transform:scale(1) rotateY(180deg);
    left:250px
  }
  98%,99% {
    transform:scale(1) rotateY(0deg)
  }
  100% {
    left:150px
  }
}

.F-body {
  background:#e7d642;
  width:100%;
  height:40px;
  position:absolute;
  border-radius:100%;
  z-index:5
}

.F-body span {
  background:#a1a35f;
  width:20px;
  height:20px;
  position:absolute;
  border-radius:100% 0 100% 100%;
  left:60px;
  transform:rotate(40deg);
  top:10px;
  box-shadow:-5px 4px 0 5px #e7d642 ,-11px 10px 0 7px #a1a35f ,-17px 15px 0 9px #e7d642 ,-28px 23px 0 9px #a1a35f
}

.F-sheem p {
  background:#a1a35f;
  position:absolute
}

.F-sheem p:nth-of-type(1) {
  width:60%;
  height:10px;
  left:20px;
  top:-5px;
  border-radius:50%
}

.F-sheem p:nth-of-type(2) {
  width:40%;
  height:20px;
  left:30px;
  top:25px;
  border-radius:50%
}

.F-mouse span {
  background:#e7d642;
  width:20px;
  height:10px;
  position:absolute;
  border-radius:100%
}

.F-mouse span:first-of-type {
  left:-5px;
  top:13px;
  transform:rotate(20deg)
}

.F-mouse span:nth-of-type(2) {
  left:-3px;
  top:17px;
  transform:rotate(-8deg)
}

.F-eye {
  width:20px;
  height:18px;
  background-color:#fff;
  border-radius:100%;
  position:absolute;
  margin:10px 5px;
  z-index:6;
  border:2px solid #E8DB5E;
  box-shadow:0 0 5px #4D4E1F inset
}

.F-ball {
  width:10px;
  height:10px;
  background-color:#000;
  border-radius:100%;
  margin:3px
}

.F-ball:after {
  content:"";
  width:5px;
  height:5px;
  background-color:#fff;
  position:absolute;
  border-radius:100%;
  margin:1px 0;
  animation:1s EyeBall ease-in-out infinite alternate
}

@keyframes EyeBall {
  100% { margin:0 4px }
}

.F-tail {
  width:20px;
  height:20px;
  background-color:#e7d642;
  position:absolute;
  border-radius:0 10% 100% 10%;
  transform:rotate(-50deg);
  margin:7px 85px;
  z-index:1;
  margin:7px 93px;
  z-index:1;
  box-shadow:0 0 0 5px #e7d642 ,0 -4px #a1a35f inset;
  animation:.3s tail ease-in-out infinite alternate
}

@keyframes tail {
  100% {
    width:10px;
    height:20px;
    margin:10px 90px
  }
}



/* =========
Copyrights
============*/
.copyrights *{transition:.1s ease-in-out}.copyrights a{font-family:monospace;font-weight:700;font-size:20px;background-color:#000;color:#fff;width:30px;height:30px;float:left;box-sizing:border-box;padding:6px 10px;border-radius:100%;margin-right:7px;opacity:.1}.copyrights a:hover{opacity:.2}.copyrights a:hover ~ p{opacity:.2;width:180px}.copyrights p{background-color:#000;float:left;color:#fff;padding:5px 15px;border-radius:3px;font-family:serif;font-size:14px;opacity:0;margin-top:2px;width:0;overflow:hidden;height:15px}.copyrights{margin:20px}.copyrights p:before{content:"";border-top:7px solid transparent;border-bottom:7px solid transparent;border-right:7px solid #000;position:absolute;margin:0 -21px}.copyrights a{color:#fff;text-decoration:none}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js