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

我试图用html和CSS填充30％的啤酒，这个进度条的技术csstricks。但我不知道是否有可能。如何用进度条填充透明图像？ #CSS #HTML #Jquery？

我有一杯啤酒与透明度内容（插图画家PNG）的形象。你知道如果有可能在后台有进度条吗？我的测试都是无果而终:-(

还是我必须用另一种方法

非常感谢您的帮助

萨科

来源

2013-12-14 user3101788

轻松..只是试一下吨。 ip：position：absolute; z-index – Hardy

你去那里：？！d（这是你可以用一些改建的CSS-招为例）做什么：演示：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>

来源

2013-12-14 10:01:22

是的，它是岩石！难以置信;-)非常感谢！代码是神奇的;-) – user3101788

你知道如何仅在鼠标上启动这个动画：over？ – user3101788

你去了:) http://jsfiddle.net/djnBD/3/ –

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

回答

相关问题