There you go :D (this is what you can do with a few alterations to the css-trick example): Demo: http://jsfiddle.net/djnBD/
<html>
<head>
<meta charset="UTF-8">
<title>Fillable Beer Bottle</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script>
$(function() {
$(".liquid").each(function() {
$(this)
.data("origHeight", $(this).height())
.height(0)
.animate({
height: $(this).data("origHeight")
}, 1200);
});
});
</script>
<style>
.glass {
height: 200px;
position: relative;
background-image: url('http://i40.tinypic.com/11hyr1j.png'); /* Beer Glass */
background-repeat: no-repeat;
}
.liquid {
z-index:-1;
position:absolute;
bottom:0;
width: 200px;
background-image: url('http://i44.tinypic.com/f0vxbt.jpg'); /* Beer Liquid Pattern */
/* Remove the bottom two lines to stop animation */
-webkit-animation: move 150s linear infinite;
-moz-animation: move 150s linear infinite;
}
@-webkit-keyframes move {
0% {
background-position: 0 0;
}
100% {
background-position: 2212px 0px;
}
}
@-moz-keyframes move {
0% {
background-position: 0 0;
}
100% {
background-position: 2212px 0px;
}
}
</style>
</head>
<body>
<div class="glass">
<span class="liquid" style="height: 30%"></span>
</div>
</body>
</html>