1

所以我试图将阴影投射到具有透明度的 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));

建议任何人解决这个问题并使过渡顺利？

谢谢，分贝

4

2 回答 2

0

我会检查这是否有效并在 Firefox 中发生。如果我不得不猜测，我会说这是 Webkit 中的错误（检查 Firefox 可以帮助确认它是浏览器错误，而不是代码中的错误）。您可以在此处提交错误报告：https ://bugs.webkit.org/

也就是说，为了解决它，您可能必须重新考虑如何解决您的问题。

例如，如果您正在为文本执行此操作，则可以使用text-shadow可动画的属性。

如果它是一个实际的图像，你可以求助于制作一个“阴影图像”，你可以淡化不透明度（如果你在内容图像上使用它），或者交换到（如果你正在交换背景图像）。

编辑我找到了这个教程，它可能对你有用。这是一个图像交叉淡入淡出效果，就像我之前建议的那样。它有一些不同的变体（包括纯 CSS 变体），因此您可以调整它以使其适合您。基本上，您将背景添加到img，然后淡入/淡出img元素本身以创建效果。我同意这并不理想（-webkit-filter如果它在浏览器中正常工作，你的技术可以说是优越的）。

于 2013-07-25T15:44:43.843 回答
0

这看起来确实像一个错误。看起来在动画进行时阴影半径的处理方式有所不同（并应用了加速过滤器）。我已将 Chrome 记录为http://crbug.com/266957

作为一种解决方法，您可以将 -webkit-transform: translateZ(0) 应用于具有阴影的元素，这将强制它始终加速。

于 2013-08-01T16:51:18.780 回答