如何在 css/js 中快速模糊？

Question

在将模糊图像与某些亚像素平移动画结合时遇到性能问题（我使用的是jQuery Transit）：

filter: blur(5px);^

在mousemove 上，重新计算模糊以模拟景深。 移动时，元素并没有像我希望的那样流畅。

Demo here

当您在-webkit 浏览器中单击瓶子时会出现错误移动

任何想法/提示我可以如何加快这一点？

我正在考虑预先计算每个焦点步骤并使用不透明度，但这是我将使用的最后一个解决方案。

Answer 1

看起来您正在同时翻译和缩放图像，这会导致跳动。尝试改用 translate3d -webkit-transform: translate3d(x,y,z) 并修改 z 位置而不是缩放。这应该对性能有很大帮助，因为您的动画现在将被硬件加速。