<h1>Tubo de ensaio (test-tube)</h1>

<div class="tube">
  <div class="bolhas-top bolha1"></div>
  <div class="bolhas-top bolha2"></div>
  <div class="bolhas-top bolha3"></div>
  <div class="bolhas-top bolha4"></div>
  <div class="bolhas-top bolha5"></div>
</div>

<p class="credit">Inspirações: <a href="https://codepen.io/ademilter/pen/qJLHw" target="_blank">Adam Ilter</a> e <a href="https://codepen.io/lbebber/full/xrwja/" target="_blank">Lucas Bebber</a></p>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300);

// Variáveis
$color-liquid: #DFF43F;
$bg-color: #34495E;

// Mixins
@mixin keyframes($animate-name) {
  @-webkit-keyframes #{$animate-name} { @content; }
  @keyframes #{$animate-name} { @content;}
}

@mixin animate($name, $time : 0.1s) {
  -webkit-animation: $name $time linear infinite;
      animation: $name $time linear infinite;
}

@mixin frames($initial-bottom : 90%, $final-bottom: 100%) {
  0% { opacity: 0; bottom: $initial-bottom; }
  25% { opacity: 0.25; }
  50% { opacity: 0.50; }
  75% { opacity: 0.75; }
  90% { opacity: 0.50; }
  100% { opacity: 0; bottom: $final-bottom; transform: scale(1.1); }
}

// Body
body { background-color: $bg-color; }

h1 {
  font-family: "Open Sans", sans-serif;
  font-weight: 300;
  text-align: center;
  color: $color-liquid;
}

/* Tube */
.tube {
  position: relative;
  margin: 100px auto;
  width: 50px;
  height: 250px;
  border: 1px solid rgba(255,255,255,0.15);
  border-top: none;
    background-repeat: repeat-x;
  background-size: 100%;
  background-image: -webkit-linear-gradient(to bottom, rgba(0,0,0,0) 20%, $color-liquid 20%), url(data:image/png;base64,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);
  background-image:    -moz-linear-gradient(to bottom, rgba(0,0,0,0) 20%, $color-liquid 20%), url(data:image/png;base64,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);
  background-image:     -ms-linear-gradient(to bottom, rgba(0,0,0,0) 20%, $color-liquid 20%), url(data:image/png;base64,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);
  background-image:      -o-linear-gradient(to bottom, rgba(0,0,0,0) 20%, $color-liquid 20%), url(data:image/png;base64,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);
  background-image:         linear-gradient(to bottom, rgba(0,0,0,0) 20%, $color-liquid 20%), url(data:image/png;base64,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);

  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.1);
  border-radius: 0 0 25px 25px;

  @include animate(animate-wave, 0.8s);
}

.bolhas-top {
  width: 10px;
  height: 10px;
  position: absolute;
  border: 1px solid rgba(0,0,0,0.05);
  background-color: rgba($color-liquid, 0.3);

  border-radius: 100%;

  box-shadow: inset 0 1px rgba($color-liquid,0.35);
}

.bolhas-top:first-child { left: 20px; @include animate(animate-bubble1, 1.5s); }
.bolhas-top:nth-child(2) { left: 30px; @include animate(animate-bubble2, 0.8s); }
.bolhas-top:nth-child(3) { left: 15px; @include animate(animate-bubble3, 1.6s); }
.bolhas-top:nth-child(4) { left: 13px; @include animate(animate-bubble4, 1s); }
.bolhas-top:last-child { left: 10px; @include animate(animate-bubble5, 1.3s); }

// Animate Bubble 1
@include keyframes(animate-bubble1) { @include frames(90%, 100%); }

// Animate Bubble 2
@include keyframes(animate-bubble2) { @include frames(90%, 103%); }

// Animate Bubble 3
@include keyframes(animate-bubble3) { @include frames(90%, 105%); }

// Animate Bubble 4
@include keyframes(animate-bubble4) { @include frames(90%, 107%); }

// Animate Bubble 5
@include keyframes(animate-bubble5) { @include frames(90%, 104%); }

// Animate Wave
@include keyframes(animate-wave) {
  0% { background-position: 0 20px; }
  50% { background-position: 25px 25px; }
  100% { background-position: 50px 20px; }
}
/*---*/

/* Créditos (credits) */
.credit {
  text-align: center;
  color: darken($bg-color, 20);
  
  a {
    color: $color-liquid;
    text-decoration: none;

    &:hover { text-decoration: underline; }
  }
}
View Compiled 
//Sem js aqui

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.