在面具下顯示圖像css/javascript

Question

我相信答案是在我面前凝視着我，但我似乎無法弄清楚這一點。

目標：我想要做的是填充一個杯子的動畫液體。這並不一定要超現實。我在想，我可以將杯子圖像作爲一層，在它後面有液體圖像，並緩慢地顯示液體，從而給人錯覺它已經被充滿了。這將與preloader（我已經建立）一起工作。

我曾嘗試過：我的第一個想法是嘗試使用CSS Mask，所以我稍微修改了一下。雖然它具有多種選項，但您不能只定義圖像，並且您定義的遮罩之外的所有內容都會顯示背後的圖像。相反，它只顯示你在面具上切出的地方，而面具外的所有東西都是白色的。使用mask-position和mask-repeat: none無法解決此問題。

我認爲可以工作：也許某種背景定位動畫？在對此進行調查的過程中，似乎並沒有讓我能夠做到我想做的事。我知道這可以用動畫的能力來緩慢地移動掩模圖層，以便給它充滿杯子的幻覺。

我的問題：我怎麼會揭露慢慢的圖像的部分用杯的圖像作爲頂層和液體作爲與後面的層給它的錯覺，以爲它緩慢地填滿杯子它之間的面具獲取動畫顯示液體？

Answer 1

UPDATE 2015年8月5日

下面是使用純CSS一個新的例子！

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

原來的答案

這裏是一個最原始的例子，我希望你明白了吧雖然:)

FIDDLE

繼承人有懸停效果提琴填寫玻璃，只是爲了好玩！

HOVER FIDDLE

HTML

<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();