2

答えが目の前にあると確信していますが、これを理解できないようです。

目標:私がやろうとしているのは、カップを満たす液体をアニメートすることです。これは超現実的である必要はありません。カップの画像を 1 つのレイヤーとして使用し、その背後に液体の画像を配置して、液体がゆっくりと現れ、液体が満たされているような錯覚を与えることができると考えていました。これは、プリローダー (既に作成済み) と連携して機能します。

私が試したこと: 私が最初に考えたのは、CSS マスクを試して使用することだったので、少しいじりました。幅広いオプションがありますが、画像を定義するだけではなく、定義したマスクの外側のすべてが画像の背後に表示されます. 代わりに、マスクで切り取った場所のみが表示され、マスクの外側はすべて白になります。mask-positionandを使用しmask-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 に答える