css代码

<style>
        .grayscaleLoading {
            position: fixed;
            width: 100%;
            height: 100%;
            width: 100vw;
            height: 100vh;
            z-index: 999;
            left: 0;
            top: 0;
            background: #403833;
        }

        .loader {
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            -mos-transform: translate(-50%, -50%);
            -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            text-align: center;
            /* disable selection and cursor changes */
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            cursor: default;
        }

        .loader .text {
            position: absolute;
            top: 57px;
            left: 22px;
            z-index: 5;
            font-size: 32px;
            text-transform: uppercase;
            -webkit-animation: text 2.5s cubic-bezier(0.750, 0.000, 0.500, 1.000) infinite normal;
            -moz-animation: text 2.5s cubic-bezier(0.750, 0.000, 0.500, 1.000) infinite normal;
            -ms-animation: text 2.5s cubic-bezier(0.750, 0.000, 0.500, 1.000) infinite normal;
            -o-animation: text 2.5s cubic-bezier(0.750, 0.000, 0.500, 1.000) infinite normal;
            animation: text 2.5s cubic-bezier(0.750, 0.000, 0.500, 1.000) infinite normal;
        }

        /* Create a container for animation*/
        .spinner {
            position: relative;
            width: 80px;
            height: 80px;
            color: #fff;
        }

        .spinner:before,
        .spinner:after {
            content: "";
            position: relative;
            display: block;
        }

        /* Create cube and set animation*/
        .spinner:before {
            -webkit-animation: spinner 2.5s cubic-bezier(0.750, 0.000, 0.500, 1.000) infinite normal;
            -moz-animation: spinner 2.5s cubic-bezier(0.750, 0.000, 0.500, 1.000) infinite normal;
            -ms-animation: spinner 2.5s cubic-bezier(0.750, 0.000, 0.500, 1.000) infinite normal;
            -o-animation: spinner 2.5s cubic-bezier(0.750, 0.000, 0.500, 1.000) infinite normal;
            animation: spinner 2.5s cubic-bezier(0.750, 0.000, 0.500, 1.000) infinite normal;
            width: 10em;
            height: 10em;
            background-color: #DB2F00;
        }

        /* Create shadow and set animation*/
        .spinner:after {
            -webkit-animation: shadow 2.5s cubic-bezier(0.750, 0.000, 0.500, 1.000) infinite normal;
            -moz-animation: shadow 2.5s cubic-bezier(0.750, 0.000, 0.500, 1.000) infinite normal;
            -ms-animation: shadow 2.5s cubic-bezier(0.750, 0.000, 0.500, 1.000) infinite normal;
            -o-animation: shadow 2.5s cubic-bezier(0.750, 0.000, 0.500, 1.000) infinite normal;
            animation: shadow 2.5s cubic-bezier(0.750, 0.000, 0.500, 1.000) infinite normal;
            position: relative;
            bottom: -1.75em;
            height: .25em;
            border-radius: 50%;
            background-color: #322b27;
        }

        @-webkit-keyframes spinner {
            50% {
                -webkit-border-radius: 50%;
                -webkit-transform: scale(.5) rotate(360deg);
                background-color: #13A3A5;
            }

            100% {
                -webkit-transform: scale(1) rotate(720deg);
                background-color: #DB2F00;
            }
        }

        @-moz-keyframes spinner {
            50% {
                -moz-border-radius: 50%;
                -moz-transform: scale(.5) rotate(360deg);
                background-color: #13A3A5;
            }

            100% {
                -moz-transform: scale(1) rotate(720deg);
                background-color: #DB2F00;
            }
        }

        @-mos-keyframes spinner {
            50% {
                -mos-border-radius: 50%;
                -mos-transform: scale(.5) rotate(360deg);
                background-color: #13A3A5;
            }

            100% {
                -mos-transform: scale(1) rotate(720deg);
                background-color: #DB2F00;
            }
        }

        @-o-keyframes spinner {
            50% {
                -o-border-radius: 50%;
                -o-transform: scale(.5) rotate(360deg);
                background-color: #13A3A5;
            }

            100% {
                -o-transform: scale(1) rotate(720deg);
                background-color: #DB2F00;
            }
        }

        @keyframes spinner {
            50% {
                border-radius: 50%;
                transform: scale(.5) rotate(360deg);
                background-color: #13A3A5;
            }

            100% {
                transform: scale(1) rotate(720deg);
                background-color: #DB2F00;
            }
        }


        /* animation shadow */
        @-webkit-keyframes shadow {
            50% {
                -webkit-transform: scale(.5);
                background-color: #322b27;
            }
        }

        @-moz-keyframes shadow {
            50% {
                -moz-transform: scale(.5);
                background-color: #322b27;
            }
        }

        @-mos-keyframes shadow {
            50% {
                -mos-transform: scale(.5);
                background-color: #322b27;
            }
        }

        @-o-keyframes shadow {
            50% {
                -o-transform: scale(.5);
                background-color: #322b27;
            }
        }

        @keyframes shadow {
            50% {
                transform: scale(.5);
                background-color: #322b27;
            }
        }

        /* animation text */
        @-webkit-keyframes text {
            0% {
                -webkit-transform: scale(1, 1);
            }

            50% {
                -webkit-transform: scale(.5, .5);
            }

            100% {
                -webkit-transform: scale(1, 1);
            }
        }

        @-moz-keyframes text {
            0% {
                -moz-transform: scale(1, 1);
            }

            50% {
                -moz-transform: scale(.5, .5);
            }

            100% {
                -moz-transform: scale(1, 1);
            }
        }

        @-mos-keyframes text {
            0% {
                -mos-transform: scale(1, 1);
            }

            50% {
                -mos-transform: scale(.5, .5);
            }

            100% {
                -mos-transform: scale(1, 1);
            }
        }

        @-o-keyframes text {
            0% {
                -o-transform: scale(1, 1);
            }

            50% {
                -o-transform: scale(.5, .5);
            }

            100% {
                -o-transform: scale(1, 1);
            }
        }

        @keyframes text {
            0% {
                transform: scale(1, 1);
            }

            50% {
                transform: scale(.5, .5);
            }

            100% {
                transform: scale(1, 1);
            }
        }
    </style>

js代码

<script src="https://www.smaxit.cn/script/grayscale.js"></script>
    <script>
        // 在 2023年 10 月 27 日 0 时 0 分 0 秒之前变灰
        var time = new Date("2023-10-28T00:00:00").getTime()

        if (time >= Date.now()) {
            $('body').append("\n<div class=\"grayscaleLoading\">\n<div class=\"loader\">\n<span class=\"text\">\u52A0\u8F7D\u4E2D...</span>\n<span class=\"spinner\"></span>\n</div>\n</div>\n");
            function BrowserType() {
                var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串 
                var isOpera = userAgent.indexOf("Opera") > -1; //判断是否Opera浏览器 
                // var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera; //判断是否IE浏览器 
                var isIE = window.ActiveXObject || "ActiveXObject" in window
                // var isEdge = userAgent.indexOf("Windows NT 6.1; Trident/7.0;") > -1 && !isIE; //判断是否IE的Edge浏览器 
                var isEdge = userAgent.indexOf("Edge") > -1; //判断是否IE的Edge浏览器
                var isFF = userAgent.indexOf("Firefox") > -1; //判断是否Firefox浏览器 
                var isSafari = userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") == -1; //判断是否Safari浏览器 
                var isChrome = userAgent.indexOf("Chrome") > -1 && userAgent.indexOf("Safari") > -1 && !isEdge; //判断Chrome浏览器 

                if (isIE) {
                    var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
                    reIE.test(userAgent);
                    var fIEVersion = parseFloat(RegExp["$1"]);
                    if (userAgent.indexOf('MSIE 6.0') != -1) {
                        return "6";
                    } else if (fIEVersion == 7) {
                        return "7";
                    } else if (fIEVersion == 8) {
                        return "8";
                    } else if (fIEVersion == 9) {
                        return "9";
                    } else if (fIEVersion == 10) {
                        return "10";
                    } else if (userAgent.toLowerCase().match(/rv:([\d.]+)\) like gecko/)) {
                        return "11";
                    } else {
                        return "0"
                    } //IE版本过低
                } //isIE end 

                if (isFF) {
                    return "21";
                }
                if (isOpera) {
                    return "22";
                }
                if (isSafari) {
                    return "23";
                }
                if (isChrome) {
                    return "24";
                }
                if (isEdge) {
                    return "25";
                }
            } //myBrowser() end
            $('html,body').css({
                "filter": "grayscale(100%)",
                "-webkit-filter": "grayscale(100%)",
                "-moz-filter": "grayscale(100%)",
                "-ms-filter": "grayscale(100%)",
                "-o-filter": "grayscale(100%)",
                "filter": "gray",
            })
            if (BrowserType() > 11) {
                $('body .grayscaleLoading').slideUp()
            }
        }
        window.onload = function () {
            if (BrowserType() < 12 && time >= Date.now()) {
                grayscale($("body"));
                $('body .grayscaleLoading').slideUp()
            }
        }

    </script>