Css 带有'；过滤器：blur（）'；对动画gif的影响

我正在用浏览器渲染一些视觉效果，我有一个背景动画gif，它占据了整个视图端口的大小：

.background {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-repeat: no-repeat;
    background-size: 150%;
    background-position-x: 50%;
    background-position-y: 50%;
    filter: blur(20px);
    -webkit-filter: blur(20px);
    background-image: url('blabla.gif')
}

问题：我的CPU将高斯模糊应用到动画gif上，然后投射到星星上

你能想出一种方法来实现这种模糊效果而不需要太多的CPU成本吗？我环顾四周，所有的例子都使用filter:blur（），但大多数都是在普通图像上，所以在这些情况下问题并不存在

---

干杯

可能你唯一相对更好的选择是webgl和canvas，并使用GLSL着色器。“你能想出一种方法来实现这种模糊效果，而不需要太多CPU成本吗？”——以后不要应用过滤器，但是直接在图像中模糊GIF的内容已经…？我们仍然使用GIF吗？@Cbroe我想避免这种情况=D@SalmanA对。。。至少在这个小实验中是的