SHESHUI.ME

Oschina CSS3 页面模糊效果

最后更新 Nov 16, 2017

Oschina CSS3 页面模糊效果

/*
* by moli
*/
$(document).ready(function(){
  if(document.cookie.indexOf("lu=") == -1 ){
    // 延时2秒
    setTimeout("jQuery.mxblur.interID = setInterval('jQuery.mxblur.begin()', 5)", 1500);
  }
});
$.mxblur = {
    interID : null,
    num: 0.01,
    begin : function() {
        jQuery.mxblur.blur( jQuery.mxblur.num );
        if(jQuery.mxblur.num > 3) {
            jQuery.mxblur.num = 0;
          if(confirm("少年!是代码写多了还是撸多了?眼睛模糊了?")) {
             alert("太累啦,就该歇歇啦,愚人节快乐:)");
             clearInterval(jQuery.mxblur.interID );
             jQuery.mxblur.blur(0);
             document.cookie = "lu=lu";
          }
        }
        jQuery.mxblur.num = jQuery.mxblur.num  + 1 /100;
    },
    blur : function() {
        $("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#"+ $.mxblur.num.toFixed(1) +")");
    }
}

评论

comment

暂无留言。

* 先[预览],后[提交]。

目录