CSS：陰影過濾器上的過渡

所以我試圖將陰影投射到帶有透明度的png文件中的非矩形對象上。目前爲止，但當我試圖在鼠標懸停在圖像上添加過渡效果時，過濾器似乎最大化了它們的設置值，然後在轉換特性的計時器啓動時快速反彈回實際設置值。我正在運行Chrome 28 Mac，但也出現在Safari上。CSS：陰影過濾器上的過渡

我已經證明了這裏這樣的效果： 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));

建議任何人誰解決這一問題，使過渡平滑？

感謝， DB

來源

2013-07-25 user2238144

我會檢查，看看這是否正常工作，並在Firefox中發生。如果我不得不猜測，我會說這是Webkit中的一個錯誤（檢查Firefox可以幫助確認它是瀏覽器錯誤，而不是代碼中的錯誤）。你可以在這裏提交一個錯誤報告：https://bugs.webkit.org/

也就是說，爲了解決它，你可能不得不重新考慮你如何解決你的問題。

例如，如果您正在爲文本操作，則可以使用可動畫的text-shadow屬性。

如果它是一個實際的圖像，你可以求助於製作一個「陰影圖像」，你可以淡化不透明度（如果你在內容圖像上使用它）或交換到（如果你交換背景圖片）。

編輯我發現this tutorial，這可能對您有用。這是一種圖像交叉淡入淡出效果，就像我之前的建議。它有幾個不同的變體（包括一個純CSS的變體），所以你可以調整它來使它適合你。基本上，您將背景添加到img，然後淡入/淡出img元素本身以創建效果。我同意這不是理想的（如果它在瀏覽器中正常工作，你的-webkit-filter技術可以說是優越的）。

來源

2013-07-25 15:44:43 Shauna

感謝您的幫助，我已經嘗試過在Firefox中，圖像完全消失。我想我將不得不使它成爲舊的方式（2張圖像，並在這些之間淡化，直到透明度支持最終成爲瀏覽器。）或者沒有人有更優雅的頁面載入減少選項嗎？ – user2238144

... – user2238144

@ user2238144 - 僅供參考，我找到了一個可能有用的教程，請參閱編輯 – Shauna

這看起來像一個錯誤。看起來陰影半徑在動畫進行過程中被不同地對待（並且應用了加速過濾器）。我已經記錄此爲Chrome爲http://crbug.com/266957

作爲一種變通方法，你可以申請-webkit-變換：translateZ（0）與陰影元素，這將迫使它總是被加速。

來源

2013-08-01 16:51:18

注意：固定爲Blink r155623;應在6-12周內在Chrome中穩定運輸。 –

CSS：陰影過濾器上的過渡

回答

相關問題