我正在尝试为网页中的特定区域制作灯光效果。我想知道我应该使用什么技术来制作这种效果，如下面的网页。
那么，是否可以通过仅使用 css/html 来实现呢？如果没有，我还应该知道什么才能做到这一点？
问问题
7772 次
3 回答
1
如果您想为在页面上水平移动的光线设置动画，您可以从两张背景图像开始（一张作为完整的“点亮”图像，另一张作为具有 alpha 透明度的黑色阴影图像，让完全点亮的图像透过）。
将全光照图像作为background-image:元素<html>，将阴影图像作为background-image:标签<body>。
然后，您可以通过更改阴影图像的背景图像位置来“动画化”。您还可以通过在移动阴影时移动“全亮”图像来添加很酷的视差 (http://stephband.info/jparallax/) 效果。
于 2012-11-07T21:51:33.200 回答
0
我不确定这可以通过 CSS3/HTML5 作为“光”效果来完成 - 您可能能够实现它，但是使用一端为黑色，另一端为不透明黑色的渐变，覆盖在完全 ' lit' 版本的照片。
我假设您正在尝试使用 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 回答