如何用进度条填充透明图像#CSS#HTML#Jquery？_Html_Css_Progress Bar_Fill

如何用进度条填充透明图像#CSS#HTML#Jquery？

html css

如何用进度条填充透明图像#CSS#HTML#Jquery？,html,css,progress-bar,fill,Html,Css,Progress Bar,Fill,我正试图用这个进度条的技术，用html和CSS以30%的比例装满一杯啤酒。但我不知道这是否可能我有一个透明内容的啤酒杯图像（illustrator中的png）。你知道有没有可能把进度条放在后台？我的测试没有结果-( 还是我必须使用另一种技术非常感谢你的帮助 Nicolas好了：D（这是对css技巧示例进行一些修改后可以做到的）：演示：可灌装啤酒瓶 $（函数（）{ $（“.liquid”）。每个（函数（）{ $（本） .data（“origHeight”，$（this）.heigh

我正试图用这个进度条的技术，用html和CSS以30%的比例装满一杯啤酒。但我不知道这是否可能

我有一个透明内容的啤酒杯图像（illustrator中的png）。你知道有没有可能把进度条放在后台？我的测试没有结果-(

还是我必须使用另一种技术

非常感谢你的帮助

Nicolas

好了：D（这是对css技巧示例进行一些修改后可以做到的）：演示：


可灌装啤酒瓶
$（函数（）{
$（“.liquid”）。每个（函数（）{
$（本）
.data（“origHeight”，$（this）.height（））
.高度（0）
.制作动画({
高度：$（此）.data（“origHeight”）
}, 1200);
});
});
.玻璃{
高度：200px；
位置：相对位置；
背景图像：url（'http://i40.tinypic.com/11hyr1j.png）；/*啤酒杯*/
背景重复：无重复；
}
.液体{
z指数：-1；
位置：绝对位置；
底部：0；
宽度：200px；
背景图像：url（'http://i44.tinypic.com/f0vxbt.jpg“）；/*啤酒液体模式*/
/*删除底部的两行以停止动画*/
-webkit动画：移动150秒线性无限；
-moz动画：移动150秒线性无限；
}
@-webkit关键帧移动{
0% {
背景位置：0；
}
100% {
背景位置：2212px 0px；
}
}
@-moz关键帧移动{
0% {
背景位置：0；
}
100% {
背景位置：2212px 0px；
}
}

好了：D（这是您可以通过对css技巧示例进行一些修改来实现的）：演示：


可灌装啤酒瓶
$（函数（）{
$（“.liquid”）。每个（函数（）{
$（本）
.data（“origHeight”，$（this）.height（））
.高度（0）
.制作动画({
高度：$（此）.data（“origHeight”）
}, 1200);
});
});
.玻璃{
高度：200px；
位置：相对位置；
背景图像：url（'http://i40.tinypic.com/11hyr1j.png）；/*啤酒杯*/
背景重复：无重复；
}
.液体{
z指数：-1；
位置：绝对位置；
底部：0；
宽度：200px；
背景图像：url（'http://i44.tinypic.com/f0vxbt.jpg“）；/*啤酒液体模式*/
/*删除底部的两行以停止动画*/
-webkit动画：移动150秒线性无限；
-moz动画：移动150秒线性无限；
}
@-webkit关键帧移动{
0% {
背景位置：0；
}
100% {
背景位置：2212px 0px；
}
}
@-moz关键帧移动{
0% {
背景位置：0；
}
100% {
背景位置：2212px 0px；
}
}

好了：D（这是您可以通过对css技巧示例进行一些修改来实现的）：演示：


可灌装啤酒瓶
$（函数（）{
$（“.liquid”）。每个（函数（）{
$（本）
.data（“origHeight”，$（this）.height（））
.高度（0）
.制作动画({
高度：$（此）.data（“origHeight”）
}, 1200);
});
});
.玻璃{
高度：200px；
位置：相对位置；
背景图像：url（'http://i40.tinypic.com/11hyr1j.png）；/*啤酒杯*/
背景重复：无重复；
}
.液体{
z指数：-1；
位置：绝对位置；
底部：0；
宽度：200px；
背景图像：url（'http://i44.tinypic.com/f0vxbt.jpg“）；/*啤酒液体模式*/
/*删除底部的两行以停止动画*/
-webkit动画：移动150秒线性无限；
-moz动画：移动150秒线性无限；
}
@-webkit关键帧移动{
0% {
背景位置：0；
}
100% {
背景位置：2212px 0px；
}
}
@-moz关键帧移动{
0% {
背景位置：0；
}
100% {
背景位置：2212px 0px；
}
}

好了：D（这是您可以通过对css技巧示例进行一些修改来实现的）：演示：


可灌装啤酒瓶
$（函数（）{
$（“.liquid”）。每个（函数（）{
$（本）
.data（“origHeight”，$（this）.height（））
.高度（0）
.制作动画({
高度：$（此）.data（“origHeight”）
}, 1200);
});
});
.玻璃{
高度：200px；
位置：相对位置；
背景图像：url（'http://i40.tinypic.com/11hyr1j.png）；/*啤酒杯*/
背景重复：无重复；
}
.液体{
z指数：-1；
位置：绝对位置；
底部：0；
宽度：200px；
背景图像：url（'http://i44.tinypic.com/f0vxbt.jpg“）；/*啤酒液体模式*/
/*删除th
<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>