CSS:阴影滤镜上的过渡
所以我试着把阴影投射到一个透明的png文件中的非矩形对象上。到目前为止，这是有效的，但当我试图在悬停在图像上添加过渡效果时，滤镜似乎会最大化它们的设置值，然后当来自过渡功能的计时器到期时，滤镜会迅速反弹到实际设置值。我运行的是Chrome28Mac，但也出现在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));推荐谁来解决这个问题，让过渡变得顺畅？
谢谢，db
回答 2
Stack Overflow用户
发布于 2013-07-25 23:44:44
我会检查一下这是否能在Firefox中工作和发生。如果要我猜的话，我会说这是Webkit中的bug (在Firefox中检查可以帮助确认这是浏览器的bug，而不是代码中的bug )。你可以在这里提交一个错误报告：https://bugs.webkit.org/
也就是说，为了解决这个问题，你可能不得不重新考虑如何去解决你的问题。
例如，如果要对文本执行此操作，则可以使用text-shadow属性，该属性是可设置动画的。
如果它是一个真实的图像，你可以使用一个“阴影图像”，你可以在上面淡化不透明度(如果你在内容图像上使用这个)，或者交换到(如果你交换背景图像)。
编辑我找到了this tutorial，它可能对你有用。这是一种图像交叉淡入淡出效果，就像我之前建议的那样。它有几个不同的变体(包括一个纯CSS )，所以您可能可以对其进行调整以使其适用于您。基本上，您向img添加背景，然后淡入/淡出img元素本身以创建效果。我同意这并不理想(如果您的-webkit-filter技术在浏览器中工作正常，那么它可以说是更好的)。
Stack Overflow用户
发布于 2013-08-02 00:51:19
这看起来确实像是个bug。看起来在动画进行过程中(并应用了加速滤镜)，阴影半径的处理方式有所不同。我以http://crbug.com/266957的身份登录了Chrome
作为一种变通方法，您可以将-webkit-transform: translateZ(0)应用于具有阴影的元素，这将强制它始终被加速。
https://stackoverflow.com/questions/17862466
复制相似问题
腾讯云开发者
