Я пытаюсь заполнить стакан пива на 30% с помощью html и CSS с помощью этого шага выполнения csstricks. Но я не знаю, возможно ли это.
У меня есть изображение стакана пива с содержанием прозрачности (png в иллюстраторе). Знаете ли вы, возможно ли иметь фоновый индикатор прогресса? Мои тесты были бесплодными. :-(
Или мне нужно использовать другую технику?
Большое спасибо за вашу помощь !
никола
Там вы идете: D (это то, что вы можете сделать с некоторыми изменениями в примере css-trick): Демо: 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>