<h1>STATES OF MATTER</h1>
<div class="title">LIQUID</div>
<div class="click">
  <input type="checkbox" class="changepos">
  <div class="drop"></div>
  <div class="glass">
    <div class="water">
      <div class="wave"></div>
      <div class="rewave"></div>
    </div>
  </div>
</div>
<div class="collection">
  <a target="_blank" href="https://codepen.io/collection/AzQqGr">VIEW MORE STATES</a>
</div>
html {
    height: 100%;
    overflow: hidden;
}

body {
    margin: 0;
    background: radial-gradient(#607d8b 15%, #000000 100%);
    font-family: Arial, Helvetica, sans-serif;
}

body, body * {
    box-sizing: border-box;
}

h1 {
    text-align: center;
    font-size: 3em;
    color: #243035;
    margin: 5vh 0;
    text-shadow: 1px 1px 1px #00000070, -1px -1px 1px #f1f1f12b;
    position: relative;
}

.title {
    position: relative;
    text-align: center;
    font-weight: bold;
    font-size: 5em;
    color: #00000000;
}

.title:before {
    position: absolute;
    content: "LIQUID";
    text-shadow: 1px 1px 1px #00000045, 0px 0px 1px #a4f0ff70;
}

input.changepos {
    width: 100%;
    height: 320px;
    opacity: 0;
    position: absolute;
    z-index: 3333;
    margin: 0;
    cursor: pointer;
    outline: none;
}

.click {
    position: relative;
    margin: 0 auto;
    width: 280px;
    height: 320px;
    top: 4vh;
}

.click:before, .click:after {
    content: "CLICK ON THE GLASS";
    position: absolute;
    bottom: -9vh;
    text-align: center;
    width: 280px;
    font-size: 1.5em;
    box-sizing: border-box;
    filter: blur(1px);
}

.click:after {
    filter: none;
    color: #1c2428;
}

.click:hover:before, .click:hover:after {
    color: #9fe7ff40;
    text-shadow: 0 0 1px #9de8ff4f;
}

.glass {
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    width: 280px;
    height: 320px;
    border-radius: 140px/50px;
    background-color: rgb(255 255 255 / 0.15);
    top: 0%;
    border: 10px solid rgb(255 255 255 / 0.15);
    box-shadow: 0px 5px 15px -10px #000;
}

.glass:before, .glass:after {
    position: absolute;
    left: -10px;
    top: -10px;
    width: 280px;
    height: 105px;
    border-radius: 140px/50px;
    content: "";
    border: 10px solid rgb(255 255 255 / 0.14);
    box-sizing: border-box;
    box-shadow: 0 0 100px 1000px #ffffff1f;
    z-index: 333;
}

.glass:after {
    top: initial;
    bottom: -10px;
    border: 10px solid rgb(255 255 255 / 5%);
    box-shadow: none;
    z-index: -1;
}

input.changepos + .drop + .glass {
    animation: reshake 0.82s cubic-bezier(.36, .07, .19, .97) both;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}

input.changepos:checked + .drop + .glass {
    animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px
}

.water {
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    width: 260px;
    height: 320px;
    border-radius: 140px/50px;
    background-color: rgb(3 169 244 / 0.5);
    top: 16%;
    animation: waterlevel 3.75s ease-out 0s 1;
}

.water:before {
    position: absolute;
    left: 0px;
    top: 0;
    width: 260px;
    height: 85px;
    border-radius: 130px/42px;
    content: "";
    box-shadow: 0 0 100px 0px #ffffff57;
    z-index: 0;
    background: radial-gradient(#80c2e038, #52a7cdb5, #00212f00);
}

.water:after {
    position: absolute;
    left: 0px;
    top: 0;
    width: 260px;
    height: 95px;
    border-radius: 140px/50px;
    content: "";
    z-index: 333;
    background: rgb(0 188 212 / 15%);
    bottom: 0;
    z-index: -1;
    background: rgb(0 188 212 / 5%);
}

.wave, .rewave {
    position: relative;
    width: 100%;
    height: 105px;
    top: -30px;
    display: block;
}


.wave:before, .wave:after, .rewave:before, .rewave:after {
    content: '';
    position: absolute;
    z-index: -1;
    top: 55%;
    right: 50%;
    transform: translate(50%) rotateX(75deg);
    border-radius: 100%;
    opacity: 0;
    width: 85%;
    height: 85%;
    border: 8px solid rgb(91 174 212 / 0.75);
    animation: dripple 4s ease-out 0s 1;
}

.wave:after, .rewave:after {
    animation: dripple 4s ease-out 1s 1;
}

.rewave {
    display: none;
}


input.changepos:checked + .drop + .glass>.water {
    animation: rewaterlevel 3.75s ease-out 0s 1;
}

input.changepos:checked + .drop + .glass>.water>.rewave {
    display: block;
}

input.changepos:checked + .drop + .glass>.water>.wave {
    display: none;
}

.collection {
    position: absolute;
    bottom: 1.5em;
    width: 100%;
    text-align: center;
}
.collection a {
    background: #ffffff29;
    font-size: 0.9em;
    font-family: Arial, Helvetica, sas;
    padding: 0.5em;
    box-sizing: border-box;
    border-radius: 3px;
    box-shadow: 0px 5px 15px -10px #000;
    text-decoration: none;
    color: #2f3d44;
    font-weight: bold;
}
.collection a:hover {
    color: #2c3a40;
    text-shadow: 0 0 1px #242f34;
    background: #13191b;
}

@keyframes dripple {
    0% { width: 10px; height: 10px; opacity: 0; }
    25% { opacity: 1; }
    100% { width: 250px; height: 250px; top: -55%; opacity: 0; }
}

@keyframes waterlevel {
      0% { top: 16%; transform: skewY(0deg);   skewX(0deg);   }
     10% { top: 15%; transform: skewY(18deg);  skewX(10deg);  }
     20% { top: 15%; transform: skewY(-18deg); skewX(-10deg); }
     30% { top: 15%; transform: skewY(10deg);  skewX(7deg);   }
     40% { top: 14%; transform: skewY(-10deg); skewX(-7deg);  }
     50% { top: 14%; transform: skewY(5deg);   skewX(5deg);   }
     60% { top: 14%; transform: skewY(-5deg);  skewX(-5deg);  }
     70% { top: 15%; transform: skewY(3deg);   skewX(2deg);   }
     80% { top: 15%; transform: skewY(-3deg);  skewX(-2deg);  }
     90% { top: 15%; transform: skewY(2deg);   skewX(0deg);   }
    100% { top: 16%; transform: skewY(0deg);   skewX(0deg);   }
}

@keyframes rewaterlevel {
      0% { top: 16%; transform: skewY(0deg);   skewX(0deg);   }
     10% { top: 15%; transform: skewY(18deg);  skewX(10deg);  }
     20% { top: 15%; transform: skewY(-18deg); skewX(-10deg); }
     30% { top: 15%; transform: skewY(10deg);  skewX(7deg);   }
     40% { top: 14%; transform: skewY(-10deg); skewX(-7deg);  }
     50% { top: 14%; transform: skewY(5deg);   skewX(5deg);   }
     60% { top: 14%; transform: skewY(-5deg);  skewX(-5deg);  }
     70% { top: 15%; transform: skewY(3deg);   skewX(2deg);   }
     80% { top: 15%; transform: skewY(-3deg);  skewX(-2deg);  }
     90% { top: 15%; transform: skewY(2deg);   skewX(0deg);   }
    100% { top: 16%; transform: skewY(0deg);   skewX(0deg);   }
}

@keyframes shake {
      0% { transform: translate(1px, 1px) rotate(0deg);    }
     10% { transform: translate(-1px, -2px) rotate(-1deg); }
     20% { transform: translate(-3px, 0px) rotate(1deg);   }
     30% { transform: translate(3px, 2px) rotate(0deg);    }
     40% { transform: translate(1px, -1px) rotate(1deg);   }
     50% { transform: translate(-1px, 2px) rotate(-1deg);  }
     60% { transform: translate(-3px, 1px) rotate(0deg);   }
     70% { transform: translate(3px, 1px) rotate(-1deg);   }
     80% { transform: translate(-1px, -1px) rotate(1deg);  }
     90% { transform: translate(1px, 1px) rotate(0deg);    }
    100% { transform: translate(1px, 1px) rotate(0deg);    }
}

@keyframes reshake {
      0% { transform: translate(1px, 1px) rotate(0deg);    }
     10% { transform: translate(-1px, -2px) rotate(-1deg); }
     20% { transform: translate(-3px, 0px) rotate(1deg);   }
     30% { transform: translate(3px, 2px) rotate(0deg);    }
     40% { transform: translate(1px, -1px) rotate(1deg);   }
     50% { transform: translate(-1px, 2px) rotate(-1deg);  }
     60% { transform: translate(-3px, 1px) rotate(0deg);   }
     70% { transform: translate(3px, 1px) rotate(-1deg);   }
     80% { transform: translate(-1px, -1px) rotate(1deg);  }
     90% { transform: translate(1px, 1px) rotate(0deg);    }
    100% { transform: translate(1px, 1px) rotate(0deg);    }
}

input.changepos + .drop {
    position: absolute;
    width: 10px;
    height: 12px;
    background: #69b4d5;
    border-radius: 100% 0 100% 100%;
    border-bottom: 1px solid #3ea4d0;
    z-index: 1;
    opacity: 0;
    top: 40px;
    animation: dripping 2s ease-out 0.25s 1;
    left: -8px;
    transform: translate(14px, 5px) rotate(90deg);
}

input.changepos:checked + .drop {
    animation: redripping 2s ease-out 0.25s 1;
}

input.changepos + .drop:before, input.changepos + .drop:after {
    position: absolute;
    width: 5px;
    height: 6px;
    background: #69b4d5;
    border-radius: 100% 0 100% 100%;
    border-bottom: 1px solid #3ea4d0;
    z-index: 1;
    content: "";
    top: 5px;
    left: -10px;
    animation: minidrop 2.5s ease-out 0.25s 1;
}

input.changepos + .drop:after {
    animation: minidrop 3.5s ease-out 0.25s 1;
    top: 0px;
    left: 0px;
}

input.changepos:checked + .drop:before {
    animation: reminidrop 2.5s ease-out 0.25s 1;
}

input.changepos:checked + .drop:after {
    animation: reminidrop 3.5s ease-out 0.25s 1;
}

@keyframes dripping {
      0% { transform: translate(14px, 5px); rotate(90deg); opacity: 0;    }
     15% { transform: translate(0px, 0px);  rotate(90deg); opacity: 1;    }
     20% { transform: translate(-5px, 5px); rotate(5deg);  opacity: 1;    }
     85% { opacity: 1;                                                    }
    100% { transform: translate(-50px, 500px) rotate(-45deg); opacity: 0; }
}

@keyframes redripping {
      0% { transform: translate(14px, 5px); rotate(90deg); opacity: 0;    }
     15% { transform: translate(0px, 0px);  rotate(90deg); opacity: 1;    }
     20% { transform: translate(-5px, 5px); rotate(5deg);  opacity: 1;    }
     85% { opacity: 1;                                                    }
    100% { transform: translate(-50px, 500px) rotate(-45deg); opacity: 0; }
}

@keyframes minidrop {
      0% { transform: translate(14px, 5px);   }
    100% { transform: translate(-50px, 50px); }
}

@keyframes reminidrop {
      0% { transform: translate(14px, 5px);   }
    100% { transform: translate(-50px, 50px); }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.