显示掩码下的图像css/javascript

Question

我敢肯定答案就在我眼前，但我似乎搞不明白。

目标：，我想做的是让液体充满活力，装满一个杯子。这不一定是超现实的。我在想，我可以有一个杯子的图像作为一层，在它后面有液体的形象，慢慢地揭示液体，给人一种错觉，认为它正在被填满。这将与一个预加载器(我已经构建)一起工作。

我已经尝试过了：我的第一个想法是尝试使用CSS掩码，所以我修改了一下。虽然它确实有广泛的选项，但您不能仅仅定义您的图像，并且您定义的掩码之外的所有内容都会显示在后面的图像。相反，它只显示你在你的面具中剪裁的地方，而且你的面具之外的所有东西都是白色的。使用mask-position和mask-repeat: none并不能有效地解决这个问题。

我认为可以工作的：，可能是某种背景定位，得到动画？在调查这件事的时候，我似乎无法让它做我想做的事。我知道这会在动画的能力下工作，慢慢地移动面具层，给它一个杯子被填满的错觉。

我的问题：，我如何慢慢地揭示图像的一部分，让它产生一种错觉，即它正在缓慢地填充一个杯子，用一个杯子的图像作为顶层，而液体作为后面的一层，它之间的面具被动画化，以显示液体？

Answer 1

更新 8/5/2015

下面是一个使用纯CSS的新示例！

http://jsfiddle.net/SptRr/296/

原始答案

下面是一个简单的例子，我希望你能明白这一点:)

FIDDLE

这里有一个小提琴和悬停效果，填补玻璃，只是为了好玩！

HOVER FIDDLE

<img src='http://www.videsignz.com/testing/images/water-front.png' />
<div></div>

CSS

img {position:absolute; left:0px; top:0px; z-index:5;}
div {position:absolute; left:0px; top:350px; background-color:blue; height:0px; display:block; width:350px;}

JQuery

function animateit(){

$('div').animate({'height' : '350px', 'top' : 0 }, 2000, function(){
   $('div').animate({'height' : 0, 'top' : '350px' }, 2000, animateit);
});

}

animateit();