Как заполнить прозрачное изображение индикатором выполнения? #CSS #HTML #Jquery?

0

Я пытаюсь заполнить стакан пива на 30% с помощью html и CSS с помощью этого шага выполнения csstricks. Но я не знаю, возможно ли это.

У меня есть изображение стакана пива с содержанием прозрачности (png в иллюстраторе). Знаете ли вы, возможно ли иметь фоновый индикатор прогресса? Мои тесты были бесплодными. :-(

Или мне нужно использовать другую технику?

Большое спасибо за вашу помощь !

никола

  • 0
    Легко .. просто попробуй что-нибудь. Совет: позиция: абсолютная; Z-индекс
Теги:
progress-bar
fill

1 ответ

3
Лучший ответ

Там вы идете: 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>
  • 0
    Знаете ли вы, как запустить эту анимацию только при помощи мыши?
  • 0
    Там вы идете :) jsfiddle.net/djnBD/3
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню