Web ページの特定の領域に照明効果を付けようとしています。次の Web ページのように、この効果を得るにはどのような手法を使用すればよいか考えています。
それで、css/htmlだけを使ってこれを達成することは可能ですか? そうでない場合、これを行うために他に何を知っておく必要がありますか?
質問する
7772 次
3 に答える
1
ページを水平方向に移動する光をアニメートしたい場合は、2 つの背景画像から始めることができます (1 つは完全に「照らされた」画像として、もう 1 つは完全に照らされた画像が透けて見えるアルファ透明度を持つ黒い影の画像として)。
完全に照らされた画像をbackground-image:要素のとして配置<html>し、影の画像をタグの としてbackground-image:配置<body>します。
次に、影イメージの background-image-position を変更して「アニメーション化」できます。影の画像を移動するときに「完全に照らされた」画像を移動することにより、クールな視差 (http://stephband.info/jparallax/) 効果を追加することもできます。
于 2012-11-07T21:51:33.200 に答える
0
CSS3/HTML5 を「軽い」効果として使用してこれを実行できるかどうかはわかりません。ただし、一方の端が黒で他方の端が不透明な黒のグラデーションを使用して、完全に '写真の点灯バージョン。
「点灯」している画像が動的に変化するため、CSSでそれをやろうとしていると思いますか? もしそうなら、Illustrator で透明な PNG を作成し、その下に画像を表示します (CSS 絶対配置を使用して簡単に実行できます)。
于 2012-11-07T21:18:49.830 に答える
0
私は、jquery ライブラリを使用したことがある人を知っています。お客様のニーズに合っているかどうかはわかりませんが、ご覧ください。http://www.tonylea.com/2011/jquery-illuminate/をご覧ください。
于 2012-11-07T21:26:50.940 に答える