如何使用css/html/js製作燈光效果

我正在嘗試爲網頁中的特定區域製作燈光效果。我想知道我應該使用什麼技術來使這個效果像下面的網頁一樣。如何使用css/html/js製作燈光效果

那麼，是否有可能通過使用css/html來實現？如果沒有，我還應該知道還有什麼要做的呢？

enter image description here

2012-11-07 Joey

它會是一個選項，使像Photoshop這樣的程序，只是用它作爲背景？ – Graviton

它可能，如果你有一個PNG圖像的透明背景，然後使用CSS和JS你可以放置它，將它移動到頂部，並設置不透明度 –

我仍然不明白如何通過使用2背景來實現這種效果圖像就像人們在下面的答案中所說的那樣。我不需要動態燈光。我只需要靜態光背景。我不知道如何使用Photoshop，所以這就是爲什麼我只想使用CSS/HTML來做到這一點。正如以下人們所說的，使用具有alpha透明度的黑色背景圖像來覆蓋原始背景圖像將會產生光照效果？照明的形狀如何？我怎麼能使圓柱形照明形狀像上面的圖像？ – Joey

如果要橫向移動橫跨頁面的光線，您可以從兩個背景圖像開始（一個是完整的「點亮」圖像，另一個是具有alpha透明度的黑色陰影圖像，全亮的圖像閃耀）。

將全亮圖像作爲<html>元素的background-image:，並將陰影圖像作爲<body>標記的background-image:。

然後，您可以通過更改陰影圖像的背景圖像位置來「動畫」。您還可以通過在移動陰影時移動「全亮」圖像來添加酷炫的Parallax（http://stephband.info/jparallax/）效果。

來源

2012-11-07 21:51:33 Stone

你描述的方式是有道理的。但我仍然有疑問。我需要使用具有alpha透明度的黑色陰影圖像來覆蓋完整照亮的原始背景圖像。然後更改Alpha透明度以顯示照明效果。你是這個意思嗎？如果是這樣，那麼我怎麼能使圓柱形照明形狀像上面的圖像？黑色陰影圖像是矩形，我只能顯示燈的矩形形狀？ – Joey

假設：在Photoshop中創建一個圖層並用黑色背景填充它。然後「擦除」您想要透明的部分。保存爲透明的.png文件。如果你想讓光線「進入」動畫，只需將另一個div放在「shadow」div上，並使用css3變換（或jquery）將其設置爲不透明。 – Stone

我不知道這可能是與CSS3/HTML5來因爲作爲這樣的「光」的效果 - 你也許可以但是實現它使用的黑色一端和不透明的黑色漸變另一方面，覆蓋在照片的完全「點亮」版本上。

我假設你正在試圖用CSS來做，因爲'點燃'的圖像會動態改變？如果是這樣，我會在Illustrator中創建一個透明的PNG，並在其下面顯示圖像（使用CSS絕對定位很容易完成）。

來源

2012-11-07 21:18:49

我建議您創建一個透明的'黑暗'PNG，而不是試圖「點亮」一張圖片，因爲這會根據圖片疊加在一起看起來更白（而不是更輕）。 –

我知道查看使用jQuery庫的人。我不確定它是否符合您的需求，但您可以看看。看一看http://www.tonylea.com/2011/jquery-illuminate/

來源

2012-11-07 21:26:50

如何使用css/html/js製作燈光效果

回答

相關問題