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

Question

我在将模糊图像与一些子像素平移动画组合时遇到性能问题(我正在使用 jQuery Transit ):

filter: blur(5px);^

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

Demo here

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

我有什么想法/提示可以加快速度吗？

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

Answer 1

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