zibll子比主题美化-GO页面跳转美化(原创)|风雪源码

今天看到zibll子比主题的默认跳转有些单调，网上也没有比较适合自己的。于是今天写了个冷色调美化版的GO页面。
效果展示

将下面源码替换zibll文件夹中的go.php文件即可

<?php

if (
    strlen($_SERVER['REQUEST_URI']) > 384 ||
    strpos($_SERVER['REQUEST_URI'], "eval(") ||
    strpos($_SERVER['REQUEST_URI'], "base64")
) {
    @header("HTTP/1.1 414 Request-URI Too Long");
    @header("Status: 414 Request-URI Too Long");
    @header("Connection: Close");
    @exit;
}
//通过QUERY_STRING取得完整的传入数据，然后取得url=之后的所有值，兼容性更好

@session_start();
$t_url = !empty($_SESSION['GOLINK']) ? $_SESSION['GOLINK'] : preg_replace('/^url=(.*)$/i', '$1', $_SERVER["QUERY_STRING"]);
//数据处理
if (!empty($t_url)) {
    //判断取值是否加密
    if ($t_url == base64_encode(base64_decode($t_url))) {
        $t_url = base64_decode($t_url);
    }
    //防止xss
    $t_url = htmlspecialchars($t_url);

    //对取值进行网址校验和判断
    preg_match('/^(http|https|thunder|qqdl|ed2k|Flashget|qbrowser):\/\//i', $t_url, $matches);
    $wiiui_title = get_bloginfo('name');
    $title = $wiiui_title . ' - 安全中心';
    if ($matches) {
        $url   = $t_url;
        // $title = '页面加载中,请稍候...';
    } else {
        preg_match('/\./i', $t_url, $matche);
        if ($matche) {
            $url   = 'http://' . $t_url;
            // $title = '页面加载中,请稍候...';
        } else {
            $url   = 'http://' . $_SERVER['HTTP_HOST'];
            $title = '参数错误，正在返回首页...';
        }
    }
} else {
    $title = '参数缺失，正在返回首页...';
    $url   = 'http://' . $_SERVER['HTTP_HOST'];
}

$url = str_replace('&', '&', $url);
?>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="robots" content="noindex, nofollow" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <?php zib_head_favicon();?>
    <title>
        <?php echo $title; ?>
    </title>
    <style>
        body {
            background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
        }

        .moxing-go-modal {
            display: block;
            position: fixed;
            z-index: 1000;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 50%;
            height: 50%;
            background: white;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            padding: 20px;
            box-sizing: border-box;
            border-radius: 20px;
            text-align: center;
        }

        .moxing-go-link-div {
            border: 2px solid white;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
            height: 20px;
            padding: 10px;
            display: flex;
            align-items: center;
            border-radius: 20px;
            margin: auto;
        }

        .moxing-go-link-div svg {
            width: 30px;
            height: 30px;
            margin-right: 10px;
        }

        .moxing-go-span {
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .button-container {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 25px;
        }

        .animated-button {
            position: relative;
            display: flex;
            align-items: center;
            gap: 4px;
            border: 4px solid;
            border-color: transparent;
            font-size: 16px;
            background-color: inherit;
            border-radius: 100px;
            font-weight: 600;
            color: black;
            box-shadow: 0 0 0 2px rgb(224, 195, 252);
            cursor: pointer;
            overflow: hidden;
            transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
        }

        .animated-button svg {
            position: absolute;
            width: 24px;
            fill: rgb(147, 197, 252);
            z-index: 9;
            transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
        }

        .animated-button .arr-1 {
            right: 16px;
        }

        .animated-button .arr-2 {
            left: -25%;
        }

        .animated-button .circle {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 20px;
            height: 20px;
            background-color: DeepSkyBlue;
            border-radius: 50%;
            opacity: 0;
            transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
        }

        .animated-button .text {
            position: relative;
            z-index: 1;
            transform: translateX(-1px);
            transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
        }

        .animated-button:hover {
            box-shadow: 0 0 0 12px transparent;
            color: #212121;
            border-radius: 12px;
        }

        .animated-button:hover .arr-1 {
            right: -25%;
        }

        .animated-button:hover .arr-2 {
            left: 16px;
        }

        .animated-button:hover .text {
            transform: translateX(12px);
        }

        .animated-button:hover svg {
            fill: #212121;
        }

        .animated-button:active {
            scale: 0.95;
            box-shadow: 0 0 0 4px rgb(147, 197, 252);
        }

        .animated-button:hover .circle {
            width: 220px;
            height: 220px;
            opacity: 1;
        }

        .information {
            font-size: 20px;
            font-weight: 600;
        }

        @media (max-width: 767px) {
            .moxing-go-modal {
                padding: 20px;
                width: 90%;
                height: 50%;
            }

            .moxing-go-link-div {
                width: 85%;
            }

            .button-container {
                gap: 20px;
                margin-top: 20px;
            }

            .animated-button {
                padding: 10px 30px;
                font-size: 16px;
            }
        }

        @media (min-width: 768px) and (max-width: 1024px) {
            .moxing-go-modal {
                padding: 20px;
                width: 80%;
                height: 50%;
            }

            .moxing-go-link-div {
                width: 85%;
            }

            .button-container {
                gap: 150px;
                margin-top: 20px;
            }

            .animated-button {
                padding: 15px 50px;
                font-size: 16px;
            }
        }

        @media (min-width: 600px) and (max-width: 1024px) and (orientation: portrait) {
            .moxing-go-modal {
                padding: 20px;
                width: 70%;
                height: 30%;
            }

            .moxing-go-link-div {
                width: 85%;
            }

            .button-container {
                gap: 50px;
                margin-top: 20px;
            }

            .animated-button {
                padding: 15px 50px;
                font-size: 16px;
            }
        }

        @media (min-width: 1024px) {
            .moxing-go-link-div {
                width: 85%;
            }

            .button-container {
                gap: 20px;
                margin-top: 25px;
            }

            .animated-button {
                padding: 15px 50px;
                font-size: 16px;
            }
        }
    </style>
</head>

<body>
    <div class="moxing-go-modal">
        <svg t="1723997117690" class="icon" viewBox="0 0 1026 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="2781" width="64" height="64">
            <path
                d="M1004.657 801.716 602.263 91.599c-49.213-86.817-129.646-86.817-178.866 0L21.004 801.716c-49.207 86.906-8.949 157.798 89.388 157.798l804.877 0C1013.606 959.514 1053.825 888.622 1004.657 801.716zM544.635 832.216l-63.649 0 0-63.649 63.649 0L544.635 832.216zM544.635 641.27l-63.649 0L480.986 259.377l63.649 0L544.635 641.27z"
                p-id="2782" fill="#1296db"></path>
        </svg>
        <p class="information">即将离开本站，请保护好个人信息</p>
        <div class="moxing-go-link-div">
            <svg t="1724045369726" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                p-id="2611" width="64" height="64">
                <path
                    d="M607.934444 417.856853c-6.179746-6.1777-12.766768-11.746532-19.554358-16.910135l-0.01228 0.011256c-6.986111-6.719028-16.47216-10.857279-26.930349-10.857279-21.464871 0-38.864146 17.400299-38.864146 38.864146 0 9.497305 3.411703 18.196431 9.071609 24.947182l-0.001023 0c0.001023 0.001023 0.00307 0.00307 0.005117 0.004093 2.718925 3.242857 5.953595 6.03853 9.585309 8.251941 3.664459 3.021823 7.261381 5.997598 10.624988 9.361205l3.203972 3.204995c40.279379 40.229237 28.254507 109.539812-12.024871 149.820214L371.157763 796.383956c-40.278355 40.229237-105.761766 40.229237-146.042167 0l-3.229554-3.231601c-40.281425-40.278355-40.281425-105.809861 0-145.991002l75.93546-75.909877c9.742898-7.733125 15.997346-19.668968 15.997346-33.072233 0-23.312962-18.898419-42.211381-42.211381-42.211381-8.797363 0-16.963347 2.693342-23.725354 7.297197-0.021489-0.045025-0.044002-0.088004-0.066515-0.134053l-0.809435 0.757247c-2.989077 2.148943-5.691629 4.669346-8.025791 7.510044l-78.913281 73.841775c-74.178443 74.229608-74.178443 195.632609 0 269.758863l3.203972 3.202948c74.178443 74.127278 195.529255 74.127278 269.707698 0l171.829484-171.880649c74.076112-74.17435 80.357166-191.184297 6.282077-265.311575L607.934444 417.856853z"
                    fill="#5D5D5D" p-id="2612"></path>
                <path
                    d="M855.61957 165.804257l-3.203972-3.203972c-74.17742-74.178443-195.528232-74.178443-269.706675 0L410.87944 334.479911c-74.178443 74.178443-78.263481 181.296089-4.085038 255.522628l3.152806 3.104711c3.368724 3.367701 6.865361 6.54302 10.434653 9.588379 2.583848 2.885723 5.618974 5.355985 8.992815 7.309476 0.025583 0.020466 0.052189 0.041956 0.077771 0.062422l0.011256-0.010233c5.377474 3.092431 11.608386 4.870938 18.257829 4.870938 20.263509 0 36.68962-16.428158 36.68962-36.68962 0-5.719258-1.309832-11.132548-3.645017-15.95846l0 0c-4.850471-10.891048-13.930267-17.521049-20.210297-23.802102l-3.15383-3.102664c-40.278355-40.278355-24.982998-98.79612 15.295358-139.074476l171.930791-171.830507c40.179095-40.280402 105.685018-40.280402 145.965419 0l3.206018 3.152806c40.279379 40.281425 40.279379 105.838513 0 146.06775l-75.686796 75.737962c-10.296507 7.628748-16.97358 19.865443-16.97358 33.662681 0 23.12365 18.745946 41.87062 41.87062 41.87062 8.048303 0 15.563464-2.275833 21.944801-6.211469 0.048095 0.081864 0.093121 0.157589 0.141216 0.240477l1.173732-1.083681c3.616364-2.421142 6.828522-5.393847 9.529027-8.792247l79.766718-73.603345C929.798013 361.334535 929.798013 239.981676 855.61957 165.804257z"
                    fill="#5D5D5D" p-id="2613"></path>
            </svg>
            <span class="moxing-go-span">
                <?php echo $url; ?>
            </span>
        </div>
        <div class="button-container">
            <button class="animated-button"
                onclick="setTimeout(function() { location.replace('//<?php echo $_SERVER['HTTP_HOST']; ?>'); }, 1000)">
                <svg viewBox="0 0 24 24" class="arr-2" xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M16.1716 10.9999L10.8076 5.63589L12.2218 4.22168L20 11.9999L12.2218 19.778L10.8076 18.3638L16.1716 12.9999H4V10.9999H16.1716Z">
                    </path>
                </svg>
                <span class="text">返回首页</span>
                <span class="circle"></span>
            </button>
            <button class="animated-button" onclick="location.replace('<?php echo $url; ?>')">
                <svg viewBox="0 0 24 24" class="arr-2" xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M16.1716 10.9999L10.8076 5.63589L12.2218 4.22168L20 11.9999L12.2218 19.778L10.8076 18.3638L16.1716 12.9999H4V10.9999H16.1716Z">
                    </path>
                </svg>
                <span class="text" onclick="location.replace('<?php echo $url; ?>')">立即前往</span>
                <span class="circle"></span>
            </button>
        </div>
    </div>
</body>

</html>
文章很赞,支持一下吧~ 还没有人为TA充电
为TA充电
还没有人为TA充电
版权声明 1 本站名称： 七九网单
2 本站网址：www.fengxue.cc
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报。
6 本站附件资源、教程等内容如因时效原因失效或不可用，请评论区留言或联系站长及时更新。
THE END