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

Question

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

filter: blur(5px);^

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

演示在这里

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

有什么想法/提示我可以加速这个吗？

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

Answer 1

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