Question

我确信答案正在盯着我，但我似乎无法弄清楚这一点。

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

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

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

我的问题：我如何慢慢地揭示图像的某些部分，以便通过使用杯子作为顶层图像和液体作为图像缓慢填充杯子的错觉后面的图层后面有一个掩码，动画显示液体？

Answer 1

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

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

1 个答案: