A Pen by Ricardo.

index.html

<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="http://codepen.io/ademilter/pen/qJLHw">Adam Ilter</a> e <a href="http://codepen.io/lbebber/full/xrwja/">Lucas Bebber</a></p>

script.js

//Sem js aqui

style.scss

@import url(http://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(http://i.imgur.com/Zx1pHum.png);
	background-image:    -moz-linear-gradient(to bottom, rgba(0,0,0,0) 20%, $color-liquid 20%), url(http://i.imgur.com/Zx1pHum.png);
	background-image:     -ms-linear-gradient(to bottom, rgba(0,0,0,0) 20%, $color-liquid 20%), url(http://i.imgur.com/Zx1pHum.png);
	background-image:      -o-linear-gradient(to bottom, rgba(0,0,0,0) 20%, $color-liquid 20%), url(http://i.imgur.com/Zx1pHum.png);
	background-image:         linear-gradient(to bottom, rgba(0,0,0,0) 20%, $color-liquid 20%), url(http://i.imgur.com/Zx1pHum.png);

	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; }
  }
}

Tubo-de-ensaio-(test-tube).markdown

Tubo de ensaio (test-tube)

Animação feita com keyframes e SASS, inspirado por projetos do Lucas Bebber (http://codepen.io/lbebber/) e Adam Ilter (http://codepen.io/ademilter/)

A Pen by Ricardo on CodePen.

License.