CSS：陰影濾鏡過渡

Question

因此，我嘗試將陰影投射到具有透明度的png文件中的非矩形對象上。 到目前為止，該方法仍然有效，但是當我嘗試在圖像上懸停時添加過渡效果時，濾鏡似乎會最大化其設置值，然后當過渡功能中的計時器啟動時，濾鏡會快速彈回實際設置值。 我正在運行Chrome 28 Mac，但也出現在Safari上。

我已經在這里演示了這種效果： http : //jsfiddle.net/dbananas/3pMS8/

transition: all 0.2s ease-in-out;
-webkit-filter: drop-shadow(0px 0px 13px rgba(0, 0, 0, 0.9));

建議誰解決這個問題並使過渡順利進行？

謝謝，分貝

Answer 1

我將檢查它是否可以在Firefox中正常運行。 如果我不得不猜測，我會說這是Webkit中的錯誤（在Firefox中進行檢查可以幫助確認這是瀏覽器錯誤，而不是代碼中的錯誤）。 您可以在此處提交錯誤報告： https : //bugs.webkit.org/

也就是說，為了解決此問題，您可能必須重新考慮如何解決問題。

例如，如果要對文本進行處理，則可以使用text-shadow屬性，該屬性可以設置動畫。

如果是真實圖像，則可以制作一個“陰影圖像”，以淡化不透明性（如果在內容圖像上使用不透明性），或交換為（如果交換背景圖像）。

編輯我找到了本教程 ，可能對您有用。 就像我以前建議的那樣，它是圖像淡入淡出效果。 它有一些不同的變體（包括一個純CSS變體），因此您可以對其進行修改以使其適合您。 基本上，您將背景添加到img ，然后淡入/淡出img元素本身以創建效果。 我同意這不是理想的選擇（如果可以在瀏覽器中正常使用，則-webkit-filter技術可以說是更好的選擇）。

Answer 2

那看起來確實像個錯誤。 在動畫進行過程中，似乎陰影半徑被不同地對待（並應用了加速濾鏡）。 我已經將此Chrome登錄為http://crbug.com/266957

解決方法是，您可以將-webkit-transform：translateZ（0）應用於具有陰影的元素，這將強制始終對其進行加速。