网页变灰效果

核心原理：使用css3的滤镜效果，filter grayscale 将整个界面变为黑白色调

方式一：通过 JS 可以设定指定时间，自动变灰以及复原

注意：以下代码需要引入 JQuery

＜script>
    //1. 得到当前的时间
    var nowTime= new Date().getTime();
    //2. 设置开始的时间是2020年4月4号凌晨
    var beginTime=new Date('2020/04/04 00:00:00').getTime();
    //3. 设置结束的时间是2020年4月5号凌晨
    var overTime=new Date('2020/04/05 00:00:00').getTime();
    //4. 如果当前时间大于等于开始时间同时小于了结束时间，简单说就是当前时间在4. 4号和5号零点之间执行
    //5. 把html 设置灰色滤镜
    if(beginTime<=nowTime && nowTime<overTime){
        $("html").css({
        '-webkit-filter': 'grayscale(100%)',
        '-moz-filter': 'grayscale(100%)',
        '-ms-filter': 'grayscale(100%)',
        '-o-filter': 'grayscale(100%)',
        //ie滤镜
        'filter':'progid:DXlmageTransform.Microsoft.Basiclmage(grayscale=1)',
        //ie6 等低版本浏览器不需要加滤镜
        '_filter': 'none'
        });
    }
</script>

方式二: 直接使用CSS处理，但是不能设置时间

<style>
    html{
    /*滤镜效果*/
    filter: grayscale(100%);
    /*webkit内核*/
    -webkit-filter: grayscale(100%);
    /*火狐内核*/
    -moz-filter: grayscale(100%);
    /*微软内核*/
    -ms-filter: grayscale(100%);
    /*欧朋内核*/
    -o-filter: grayscale(100%);
    /*ie专有滤镜*/
    filter: progid:DXImageTransform.Microsoft.Basiclmage(grayscale=1);
    }
</style>

Cmd Markdown 编写

图片展区

出自博主wlop-漫画【鬼刀】(海琴烟-笼中雀)