<!DOCTYPE html>
<html>
<head>
<title>HTML, CSS and JavaScript demo</title>
</head>
<body>

<div class="bubbles">
    <span class="bubble b1"></span>
    <span class="bubble b2"></span>
    <span class="bubble b3"></span>
    <span class="bubble b4"></span>
    <span class="bubble b5"></span>
    <span class="bubble b6"></span>
    <span class="bubble b7"></span>
  </div>

<div class="fish fish-one">
    <div class="tail"></div>
    <div class="fish-body">
      <div class="eye"></div>
      <div class="fin"></div>
    </div>
  </div>

<div class="fish fish-two">
    <div class="tail"></div>
    <div class="fish-body">
      <div class="eye"></div>
      <div class="fin"></div>
    </div>
  </div>

<div class="fish fish-three">
    <div class="tail"></div>
    <div class="fish-body">
      <div class="eye"></div>
      <div class="fin"></div>
    </div>
  </div>

<div class="plant plant-one">
    <span></span>
    <span></span>
    <span></span>
  </div>

<div class="rock rock-one"></div>
  <div class="rock rock-two"></div>
  <div class="rock rock-three"></div>

</div>

</body>
</html>

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;

background:
    radial-gradient(
      circle at 50% 20%,
      #24364a,
      #101923 55%,
      #080d12
    );
}

/* =====================================
   AQUARIUM
===================================== */

.aquarium {
  position: relative;

width: min(900px, 92vw);
  height: min(540px, 78vh);

overflow: hidden;

border-radius: 35px;

background:
    linear-gradient(
      to bottom,
      #168fa9 0%,
      #08778e 35%,
      #07596e 70%,
      #063d50 100%
    );

border:
    10px solid #17222a;

box-shadow:
    0 40px 90px rgba(0,0,0,.55),
    inset 0 0 70px rgba(0,0,0,.3),
    inset 0 3px 3px rgba(255,255,255,.25);
}

/* glass highlight */

.aquarium::after {
  content: "";

position: absolute;
  inset: 0;

pointer-events: none;

background:
    linear-gradient(
      120deg,
      rgba(255,255,255,.13),
      transparent 28%,
      transparent 75%,
      rgba(255,255,255,.04)
    );

z-index: 20;
}

/* =====================================
   UNDERWATER LIGHT
===================================== */

.water-light {
  position: absolute;

top: -100px;
  left: 15%;

width: 70%;
  height: 500px;

background:
    linear-gradient(
      110deg,
      transparent 20%,
      rgba(160,245,255,.08) 35%,
      transparent 50%,
      rgba(180,250,255,.06) 65%,
      transparent 80%
    );

transform: skewX(-15deg);

animation: lightMove 7s ease-in-out infinite alternate;
}

/* =====================================
   SAND
===================================== */

.sand {
  position: absolute;

left: -5%;
  bottom: -20px;

width: 110%;
  height: 100px;

background:
    linear-gradient(
      #d6b879,
      #b9955d
    );

border-radius: 50% 50% 0 0 / 30% 30% 0 0;

box-shadow:
    inset 0 12px 20px rgba(255,255,255,.08);

z-index: 2;
}

/* =====================================
   ROCKS
===================================== */

.rock {
  position: absolute;

bottom: 55px;

background:
    linear-gradient(
      145deg,
      #65747a,
      #35484e
    );

border-radius:
    60% 45% 35% 50%;

z-index: 4;

box-shadow:
    inset 8px 7px 10px rgba(255,255,255,.08),
    0 7px 10px rgba(0,0,0,.2);
}

.rock-one {
  left: 12%;
  width: 90px;
  height: 60px;
}

.rock-two {
  left: 19%;
  width: 60px;
  height: 45px;

transform: rotate(12deg);
}

.rock-three {
  right: 13%;
  width: 100px;
  height: 65px;

transform: rotate(-8deg);
}

/* =====================================
   PLANTS
===================================== */

.plant {
  position: absolute;

bottom: 70px;

width: 90px;
  height: 170px;

z-index: 3;
}

.plant-one {
  left: 7%;
}

.plant-two {
  right: 8%;

transform: scale(.8);
}

.plant-three {
  left: 29%;

transform: scale(.65);
}

.plant span {
  position: absolute;

bottom: 0;

width: 18px;
  height: 150px;

border-radius: 100% 0 100% 0;

background:
    linear-gradient(
      90deg,
      #1d7a55,
      #45a867
    );

transform-origin: bottom center;

animation: plantWave 3s ease-in-out infinite alternate;
}

.plant span:nth-child(1) {
  left: 20px;

transform: rotate(-18deg);
}

.plant span:nth-child(2) {
  left: 43px;

height: 170px;

animation-delay: -.8s;
}

.plant span:nth-child(3) {
  left: 62px;

height: 130px;

transform: rotate(18deg);

animation-delay: -1.5s;
}

/* =====================================
   FISH
===================================== */

.fish {
  position: absolute;

width: 130px;
  height: 70px;

z-index: 8;
}

/* BODY */

.fish-body {
  position: absolute;

right: 0;
  top: 5px;

width: 95px;
  height: 58px;

border-radius:
    55% 45% 45% 55%;

background:
    linear-gradient(
      145deg,
      #ffcf62,
      #f1843e 60%,
      #df563d
    );

box-shadow:
    inset 5px 7px 10px rgba(255,255,255,.18),
    inset -8px -5px 10px rgba(120,40,20,.12);
}

/* TAIL */

.tail {
  position: absolute;

left: 4px;
  top: 10px;

width: 55px;
  height: 50px;

background: #ef6b43;

clip-path:
    polygon(
      100% 50%,
      0 0,
      18% 50%,
      0 100%
    );

transform-origin: right center;

animation: tailMove .55s ease-in-out infinite alternate;
}

/* EYE */

.eye {
  position: absolute;

right: 18px;
  top: 16px;

width: 11px;
  height: 11px;

background: white;

border-radius: 50%;
}

.eye::after {
  content: "";

position: absolute;

width: 5px;
  height: 5px;

left: 3px;
  top: 3px;

background: #17222a;

border-radius: 50%;
}

/* FIN */

.fin {
  position: absolute;

left: 40px;
  bottom: -9px;

width: 35px;
  height: 25px;

background: #dd6042;

clip-path:
    polygon(
      0 0,
      100% 15%,
      30% 100%
    );

animation: finMove 1s ease-in-out infinite alternate;
}

/* =====================================
   INDIVIDUAL FISH
===================================== */

.fish-one {
  top: 32%;
  left: -160px;

animation: swimOne 12s linear infinite;
}

.fish-two {
  top: 53%;
  left: -150px;

transform: scale(.65);

animation: swimTwo 17s linear infinite;

animation-delay: -6s;
}

.fish-two .fish-body {
  background:
    linear-gradient(
      145deg,
      #67d8d0,
      #218fa1 65%,
      #14637c
    );
}

.fish-two .tail,
.fish-two .fin {
  background: #267f94;
}

.fish-three {
  top: 18%;
  left: -160px;

transform: scale(.45);

animation: swimThree 20s linear infinite;

animation-delay: -12s;
}

.fish-three .fish-body {
  background:
    linear-gradient(
      145deg,
      #e998d8,
      #9857bd 65%,
      #62419d
    );
}

.fish-three .tail,
.fish-three .fin {
  background: #8a52ad;
}

/* =====================================
   BUBBLES
===================================== */

.bubble {
  position: absolute;

bottom: -30px;

width: 15px;
  height: 15px;

border:
    2px solid rgba(220,250,255,.55);

border-radius: 50%;

box-shadow:
    inset 2px 2px 4px rgba(255,255,255,.2);

animation:
    bubbleRise 7s linear infinite;
}

.b1 {
  left: 15%;
  animation-delay: 0s;
}

.b2 {
  left: 20%;

width: 9px;
  height: 9px;

animation-delay: -2s;
}

.b3 {
  left: 45%;

width: 20px;
  height: 20px;

animation-delay: -4s;
}

.b4 {
  left: 65%;

width: 11px;
  height: 11px;

animation-delay: -1s;
}

.b5 {
  left: 78%;

animation-delay: -5s;
}

.b6 {
  left: 85%;

width: 8px;
  height: 8px;

animation-delay: -3s;
}

.b7 {
  left: 35%;

width: 12px;
  height: 12px;

animation-delay: -6s;
}

/* =====================================
   ANIMATION
===================================== */

@keyframes swimOne {

0% {
    left: -160px;
    transform: translateY(0);
  }

25% {
    transform: translateY(-25px);
  }

50% {
    transform: translateY(12px);
  }

75% {
    transform: translateY(-12px);
  }

100% {
    left: calc(100% + 160px);
    transform: translateY(0);
  }
}

@keyframes swimTwo {

0% {
    left: -160px;
    transform:
      scale(.65)
      translateY(0);
  }

50% {
    transform:
      scale(.65)
      translateY(35px);
  }

100% {
    left: calc(100% + 160px);

transform:
      scale(.65)
      translateY(0);
  }
}

@keyframes swimThree {

0% {
    left: -160px;

transform:
      scale(.45)
      translateY(0);
  }

50% {
    transform:
      scale(.45)
      translateY(-40px);
  }

100% {
    left: calc(100% + 160px);

transform:
      scale(.45)
      translateY(0);
  }
}

@keyframes tailMove {

from {
    transform: rotateY(0deg);
  }

to {
    transform:
      rotateY(35deg)
      skewY(5deg);
  }
}

@keyframes finMove {

from {
    transform: rotate(-5deg);
  }

to {
    transform: rotate(15deg);
  }
}

@keyframes bubbleRise {

0% {
    transform:
      translateY(0)
      translateX(0)
      scale(.7);

opacity: 0;
  }

10% {
    opacity: .7;
  }

50% {
    transform:
      translateY(-45vh)
      translateX(18px)
      scale(1);
  }

100% {
    transform:
      translateY(-90vh)
      translateX(-10px)
      scale(1.2);

opacity: 0;
  }
}

@keyframes plantWave {

from {
    transform:
      rotate(-9deg)
      skewX(-3deg);
  }

to {
    transform:
      rotate(8deg)
      skewX(3deg);
  }
}

@keyframes lightMove {

from {
    transform:
      translateX(-30px)
      skewX(-15deg);
  }

to {
    transform:
      translateX(45px)
      skewX(-10deg);
  }
}

Liveweave: Generative AI Web Editor & HTML/CSS/JS Playground