火狐浏览器的filter blur 模糊动画

2014-03-18

因为公司蛋痛的愚人节想糊弄一下用户,在公司内部悬赏12盒大象安全套做奖励,谁的代码最终被采纳,谁就可以独享12盒安全套……

简直就是想让我们战死in bed。。。然后我的代码被采纳了。

动态模糊效果。

在谷歌浏览器,Safari,opera上都可以完美运行。就是火狐不行!

火狐使用的方式是svg文件的方式来进行模糊效果。可是,不能像其他浏览器一样?

$(“body”).css(“-webkit-filter”,”blur(“+$.mxblur.num+”px)”); $(“body”).css(“-moz-filter”,”blur(“+$.mxblur.num+”px)”); $(“body”).css(“-o-filter”,”blur(“+$.mxblur.num+”px)”); $(“body”).css(“-ms-filter”,”blur(“+$.mxblur.num+”px)”); $(“body”).css(“filter”,”blur(“+$.mxblur.num+”px)”);

$(“body”).css(“filter”,”url(blur.svg#”+parseInt($.mxblur.num)+”)”);   //火狐浏览器,需要加载svg文件

上面的代码完美兼容各种浏览器(除了ie),火狐的如下:

但是没动画效果啊!我要动画!那我就生成各种svg的配置id给火狐浏览器好了!

火狐浏览器的模糊动画效果搞定。