显示掩码下的图像css / javascript [英] Reveal image underneath a mask css/javascript

问题描述

我相信答案是在脸上盯着我，但我似乎无法想象出来。

目标：我想做的是动画液体填满一杯。这不必是超现实的。我想我可以有一个杯子图像作为一层，它背后有液体的形象，并显示液体缓慢地给出的错觉，它正在填补它。

我试过的：我的第一个想法是尝试，使用CSS掩码，所以我修改了一点。虽然它有各种各样的选项，你不能只是定义你的图像和面具之外的一切，你已经定义将显示图像背后。相反，它只显示你在面具中切出的地方，面具外面的一切都是白色的。使用 mask-position 和 mask-repeat：none 无法解决此问题。

我认为可以工作：可能是某种背景定位，得到动画？在看着这个，它似乎不是我会能够做到我想要的。我知道这将在一个动画的能力，以缓慢移动面具层，给它一个杯子被填满的错觉。

我的问题： / strong>我如何缓慢地显示图像的一部分，给它一个幻觉，它慢慢地填充一杯通过使用杯子的图像作为顶层和液体作为背后的层面之间的一个面具之间的动画显示液体？

解决方案

UPDATE 8/5/2015

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

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

原文回答

这里是一个粗略的例子，我希望你能得到这点：）

FIDDLE

使用悬停效果玻璃，只是为了好玩！

HOVER FIDDLE

HTML p> < 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;显示：block; width：350px;} 
  

JQuery

  function animateit（）{
 
 $（'div'）。animate（{'height'：'350px'，'top' ：0}，2000，function（）{
 $（'div'）。animate（{'height'：0，'top'：'350px'}，2000，animateit）; 
} ; 
 
} 
 
 animateit（）; 
  

I am sure the answer is staring me in the face, but I can't seem to figure this out.

Goal: What I am trying to do is animate liquid filling up a cup. This doesn't have to be super realistic. I was thinking that I could have a cup image as one layer, and behind it have the image of liquid and reveal the liquid slowly to give the illusion that it's being filled it up. This will work in conjunction with a preloader (that I have already built).

What I have tried: My first thought was to try and use a CSS Mask, so I tinkered with that a little bit. While it does have a wide range of options, you can't just define your image and everything outside of the mask that you've define would show the image behind. Instead, it only shows the places you have cut out in your mask, and everything outside of your mask is white. Using mask-position and mask-repeat: none does not work to try and work around this.

What I think could work: Maybe some sort of background positioning that gets animated?? While looking into this, it didn't seem like I was going to be able to make this do what I wanted. I know that this would work in an animation capacity to move the mask layer slowly to give it that illusion of a cup being filled up.

My question: How would I reveal parts of an image slowly to give it the illusion that it's slowly filling up a cup by using an image of a cup as a top layer and the liquid as the layer behind with a mask between that gets animated to show the liquid?

解决方案

UPDATE 8/5/2015

Here is a new example using pure CSS!

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

ORIGINAL ANSWER

Here is a crude example, I hope you get the point though :)

FIDDLE

Heres a fiddle with a hover effect to fill the glass, just for fun!

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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！