2

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

目标：我正在尝试做的是动画填充杯子的液体。这不一定是超级现实的。我在想我可以有一个杯子图像作为一层，在它后面有液体的图像，慢慢地露出液体，给人一种被装满的错觉。这将与预加载器（我已经构建）一起使用。

我尝试过的： 我的第一个想法是尝试使用 CSS 掩码，所以我稍微修改了一下。虽然它确实有广泛的选项，但您不能只定义您的图像，并且您定义的蒙版之外的所有内容都会显示后面的图像。相反，它只显示你在面具中剪掉的地方，面具之外的一切都是白色的。使用mask-positionandmask-repeat: none无法尝试解决此问题。

我认为可行的方法： 也许某种背景定位会变得动画？在调查这一点时，我似乎无法做到我想要的。我知道这将在动画能力中起作用，以缓慢移动遮罩层，使其产生杯子被装满的错觉。

我的问题： 我将如何缓慢地显示图像的某些部分，以通过使用杯子的图像作为顶层，将液体作为后面的图层，并在其之间设置一个蒙版，从而给它一种缓慢填满杯子的错觉显示液体？

4

1 回答 1

9

2015 年 8 月 5 日更新

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

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

原始答案

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

小提琴

这是一个带有悬停效果的小提琴来填充玻璃，只是为了好玩！

悬停小提琴

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();
于 2012-12-07T23:19:27.087 回答