<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div id="flask">
<div class="background"></div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 113 130" xml:space="preserve">
<g>
<path fill="#E6E9EA" d="M0,0v130h112.084L111.75,0H0z M94.75,128C71,128,56,128,56,128s-14.873,0-38.623,0s-13.945-19.422-6.33-35.945S40,41.25,40,41.25V3h16h11v38.25c0,0,23.901,34.283,31.517,50.805S118.5,128,94.75,128z" />
<path fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" d="M56,127.5c0,0-14.873,0-38.623,0s-13.695-19.172-6.08-35.695C18.912,75.283,40.5,41.25,40.5,41.25V2.5h-9H56h19.5h-8v38.75c0,0,23.651,34.033,31.267,50.555c7.615,16.523,19.733,35.695-4.017,35.695S56,127.5,56,127.5z" />
</g>
</svg>
<!--<div class="bubble b0"></div>-->
<div class="bubble b1"></div>
<div class="bubble b2"></div>
<div class="bubble b3"></div>
<div class="bubble b4"></div>
<div class="bubble b5"></div>
<!--<div class="bubble b6"></div>
<div class="bubble b7"></div>
<div class="bubble b8"></div>
<div class="bubble b9"></div>-->
<div class="swirl s0"></div>
<div class="swirl s1"></div>
<div class="swirl s2"></div>
<div class="swirl s3"></div>
<!--<div class="swirl s4"></div>
<div class="swirl s5"></div>-->
</div>
html,
body {
background-color: #E6E9EA;
text-align: center;
}
#flask {
height: 110px;
margin: 200px auto 0;
position: relative;
width: 94px;
}
#flask svg {
bottom: 0;
height: 110px;
left: 0;
position: absolute;
width: 95px;
z-index: 1;
}
#flask .background {
animation: 3s ease 0s normal none infinite running liquid, 80s ease 0s normal none infinite running liquid-color;
background-color: #5bbcfc;
bottom: 0;
height: 20px;
left: 0;
position: absolute;
width: 90px;
z-index: 0;
}
.bubble {
width: 30px;
height: 30px;
background: #5BBCFC;
border-radius: 40px;
position: absolute;
top: 50px;
}
@keyframes liquid {
0% {
height: 30px;
}
10% {
height: 35px;
}
35% {
height: 30px;
}
50% {
height: 35px;
}
80% {
height: 30px;
}
100% {
height: 35px;
}
}
@keyframes liquid-color {
from {
-webkit-filter: hue-rotate(-360deg);
}
to {
-webkit-filter: hue-rotate(0deg);
}
}
@keyframes bubble {
0% {
top: 50px;
}
100% {
top: -50px;
opacity: 0;
}
}
@keyframes side {
0% {
margin-right: 0px;
}
100% {
margin-right: 0px;
}
}
.b1,
.b2,
.b3 {
right: 33px;
transform: scale(0.4);
opacity: 0.6;
animation: bubble 8s linear infinite, liquid-color 80s infinite, side 2s ease-in-out infinite alternate;
}
.b2 {
right: 35px;
transform: scale(0.5);
animation-delay: 2s, 0s, 2s;
}
.b3 {
right: 37px;
animation-delay: 5s, 0s, 5s;
animation: bubble 10s linear infinite, liquid-color 80s infinite, side 3s ease-in-out infinite alternate;
}
.b4,
.b5 {
right: 39px;
transform: scale(0.5);
opacity: 0.8;
animation: bubble 16s linear infinite, liquid-color 80s infinite, side 5s ease-in-out infinite alternate;
animation-delay: 4s, 0s, 4s;
}
.b5 {
right: 40px;
animation-delay: 5s, 0s, 5s;
}
.b6,
.b7,
.b8 {
right: 37px;
transform: scale(0.6);
opacity: 0.4;
animation: bubble 14s linear infinite, liquid-color 80s infinite, side 3s ease-in-out infinite alternate;
animation-delay: 9s, 0s, 9s;
}
.b7 {
right: 32px;
transform: scale(0.7);
animation-delay: 3s, 0s, 3s;
}
.b8 {
right: 35px;
animation-delay: 7s, 0s, 7s;
}
.b9,
.b0 {
right:33px;
transform: scale(0.65);
opacity: 0.7;
animation: bubble 20s linear infinite, liquid-color 80s infinite, side 5s ease-in-out infinite alternate;
}
.b0 {
right: 33px;
animation-delay: 13s, 0s, 13s;
}
.swirl {
width: 20px;
height: 20px;
background: #5BBCFC;
border-radius: 20px;
position: absolute;
top: 80px;
left: 10px;
}
@keyframes swirl {
0% {
top: 70px;
}
100% {
top: 75px;
}
}
.s0 {
animation: liquid-color 80s infinite, swirl 1s ease-in-out infinite alternate;
}
.s1 {
left: 50px;
transform: scale(1.2);
animation: liquid-color 80s infinite, swirl 2s ease-in-out infinite alternate;
animation-delay: 0s, 2s;
}
.s2 {
left:30px;
transform: scale(0.8);
animation: liquid-color 80s infinite, swirl 2s ease-in-out infinite alternate;
animation-delay: 0s, 3s;
}
.s3 {
left:35px;
transform: scale(1.4);
animation: liquid-color 80s infinite, swirl 1s ease-in-out infinite alternate;
animation-delay: 0s, 5s;
}
.s4 {
left:40px;
animation: liquid-color 80s infinite, swirl 2s ease-in-out infinite alternate;
animation-delay: 0s, 3s;
}
.s5 {
left: 50px;
transform: scale(0.8);
animation: liquid-color 80s infinite, swirl 1s ease-in-out infinite alternate;
animation-delay: 0s, 2s;
}
