显示掩码css/javascript下面的图像

Question

我肯定答案是盯着我的脸,但我似乎无法弄清楚这一点.

目标:我想要做的是制作一个杯子的动画液体.这不一定非常逼真.我以为我可以将杯子图像作为一层,然后在它后面有液体图像并缓慢地显示液体以给出它正在被填满的错觉.这将与预加载器(我已经构建)一起使用.

我尝试过的: 我的第一个想法是尝试使用CSS Mask,所以我稍微修改了一下.虽然它确实有很多选项,但您不能只定义图像,而且您定义的蒙版之外的所有内容都会显示背后的图像.相反,它只显示你在面具中切出的地方,并且面具外面的所有东西都是白色的.使用mask-position和mask-repeat: none无法尝试解决此问题.

我认为可以工作: 也许某种背景定位会变得动画？在研究这个问题的时候,我似乎并没有能够做到这一点.我知道这可以在动画容量中缓慢移动遮罩层,使其得到填充杯子的错觉.

我的问题: 我如何缓慢地揭示图像的某些部分,以便通过使用杯子作为顶层图像慢慢填充杯子而液体作为背后的图层,其间有一个掩模,使其变得生动.显示液体？

Answer 1

2015年8月5日更新

这是一个使用纯CSS的新例子!

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

原始答案

这是一个粗略的例子,我希望你明白这一点:)

小提琴

这是一个悬浮效果的小提琴,以填充玻璃,只是为了好玩!

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