应用错误收集

时间：2012-11-07 21:14:03

标签： html css lighting

我正在尝试为网页中的特定区域制作照明效果。我想知道我应该用什么技术来制作这种效果，如下面的网页。

那么，是否可以通过使用css / html实现这一目标？如果没有，我还应该知道其他什么呢？

enter image description here

答案 0 :(得分：1)

如果您想要在水平方向上移动光线的动画，您可以从两个背景图像开始（一个作为完整的“点亮”图像，另一个作为具有Alpha透明度的黑色阴影图像，让全亮图像闪耀）

将完整亮起的图像作为background-image:元素的<html>和阴影图像作为background-image:标记的<body>。

然后，您可以通过更改阴影图像的背景图像位置来“动画”。您还可以在移动阴影时移动“全亮”图像，从而添加一个很酷的Parallax（http://stephband.info/jparallax/）效果。

答案 1 :(得分：0)

我不确定这可以用CSS3 / HTML5作为'轻'效果 - 你可能能够实现它但是使用一端为黑色而另一端为不透明黑色的渐变，覆盖在完全“点亮”的照片版本。

我假设您正在尝试使用CSS，因为“点亮”的图像会动态变化？如果是这样，我会在Illustrator中创建一个透明的PNG，并在其下方显示您的图像（使用CSS绝对定位轻松完成）。

答案 2 :(得分：0)

我知道看过那些使用过jquery库的人。我不确定它是否符合您的需求，但您可以看看。看看http://www.tonylea.com/2011/jquery-illuminate/