CPU超级加载，对动画gif有'filter：blur（）'效果

Question

我正在浏览一些在浏览器中呈现的视觉效果，并且我有一个背景动画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（），但是大多数是在普通图像上，所以在这种情况下不存在问题。

干杯！