如何在css/js中快速模糊

How to fast-blur in css/js?

本文关键字：模糊 js css 更新时间：2023-09-26

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

filter: blur(5px);^

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

在这里演示

当你点击-webkit浏览器中的瓶子时，会出现Buggy运动

有什么想法/建议我可以加快这一进程吗？

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

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