超好看！子比主题 GO 跳转页美化 动态粒子背景源码

<?php
// 安全过滤：限制REQUEST_URI长度并拦截危险字符
if (
    strlen($_SERVER['REQUEST_URI']) > 384 ||
    strpos($_SERVER['REQUEST_URI'], "eval(") !== false ||
    strpos($_SERVER['REQUEST_URI'], "base64") !== false
) {
    header("HTTP/1.1 414 Request-URI Too Long");
    header("Status: 414 Request-URI Too Long");
    header("Connection: Close");
    exit;
}

session_start();
$target_url = '';

// 获取跳转URL（优先SESSION，其次QUERY_STRING）
if (!empty($_SESSION['GOLINK'])) {
    $target_url = $_SESSION['GOLINK'];
    unset($_SESSION['GOLINK']);
} else {
    $query_string = $_SERVER["QUERY_STRING"];
    if (preg_match('/^url=(.*)$/i', $query_string, $matches)) {
        $target_url = $matches[1];
    }
}

// 解析并验证URL
if (!empty($target_url)) {
    $decoded_url = base64_decode($target_url, true);
    if ($decoded_url !== false && base64_encode($decoded_url) === $target_url) {
        $target_url = $decoded_url;
    }
    $target_url = htmlspecialchars($target_url, ENT_QUOTES, 'UTF-8');

    preg_match('/^(http|https|thunder|qqdl|ed2k|Flashget|qbrowser):\/\//i', $target_url, $protocol_matches);
    if ($protocol_matches) {
        $url = $target_url;
    } else {
        preg_match('/\./i', $target_url, $domain_matches);
        if ($domain_matches) {
            $url = 'http://' . $target_url;
        } else {
            $url = 'http://' . $_SERVER['HTTP_HOST'];
        }
    }
} else {
    $url = 'http://' . $_SERVER['HTTP_HOST'];
}

$url = htmlspecialchars_decode($url, ENT_QUOTES);
$url_escaped = htmlspecialchars($url, ENT_QUOTES, 'UTF-8');
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>自动跳转提示 | 3秒安全跳转</title>
    <meta name="keywords" content="自动跳转页面,安全跳转链接">
    <meta name="description" content="您将在3秒后自动跳转，网络交易有风险，请注意辨别。">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="robots" content="index,follow">
    <meta name="theme-color" content="#165DFF">

    <style>
*{margin:0;padding:0;box-sizing:border-box;font-family:Inter,system-ui,-apple-system,sans-serif}
body{background-color:#f0f4f8;min-height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:1rem}
.container{position:relative;z-index:10;width:100%;max-width:580px;}
/* 降低整体高度，优化背景 */
.card{
    background:rgba(240,245,255,0.75);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border-radius:1.2rem;
    box-shadow:0 8px 30px rgba(22,93,255,0.08);
    padding:2rem 2rem 1.5rem; /* 移动端减少左右内边距 */
    text-align:center;
    border:1px solid rgba(22,93,255,0.15);
    position:relative;
    overflow:hidden;
}
.card::before{
    content:'';
    position:absolute;
    top:-50%;
    right:-50%;
    width:200px;
    height:200px;
    background:linear-gradient(45deg, rgba(22,93,255,0.05), transparent);
    border-radius:50%;
    z-index:0;
    animation:float 8s infinite ease-in-out;
}
.card::after{
    content:'';
    position:absolute;
    bottom:-40%;
    left:-30%;
    width:180px;
    height:180px;
    background:linear-gradient(135deg, rgba(123,97,255,0.05), transparent);
    border-radius:50%;
    z-index:0;
    animation:float 10s infinite ease-in-out reverse;
}
/* LOGO容器增大0.5倍 */
.logo-container{
    width:27rem;/* 18rem * 1.5 = 27rem */
    height:10.5rem;/* 7rem * 1.5 = 10.5rem */
    margin:0 auto 1.5rem;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    z-index:1;
    /* 移动端LOGO自适应限制 */
    max-width:90vw;
    max-height:30vh;
}
.logo-img{
    max-width:100%;
    max-height:100%;
    object-fit:contain;
    border-radius:.5rem;
}
.countdown-text{
    font-size:clamp(1.3rem,3vw,1.6rem);
    font-weight:600;
    color:#1d2129;
    margin-bottom:1rem;
    position:relative;
    z-index:1;
}
.countdown-number{
    font-size:clamp(1.6rem,4vw,2.2rem);
    font-weight:700;
    color:#165dff;
    display:inline-block;
    transition:transform .3s ease;
}
.progress-container{
    width:100%;
    height:1rem;
    background-color:rgba(229,231,235,0.8);
    border-radius:.5rem;
    overflow:hidden;
    margin-bottom:1.2rem;
    position:relative;
    z-index:1;
    box-shadow:inset 0 1px 2px rgba(0,0,0,0.05);
}
.progress-bar{
    height:100%;
    background:linear-gradient(90deg,#165dff,#7b61ff);
    animation:countdown 3s linear forwards;
    border-radius:.5rem;
    box-shadow:0 0 8px rgba(22,93,255,0.3);
}
/* 修复移动端风险提示文字被遮盖问题 */
.warning-box{
    background:linear-gradient(135deg, #fff8f0, #fffaf5);
    border:1px solid #ffd5b0;
    border-radius:0.8rem;
    padding:1rem 0.8rem; /* 减少左右内边距 */
    margin-bottom:1.2rem;
    text-align:center;
    display:flex;
    align-items:center;
    justify-content:flex-start; /* 改为左对齐，避免文字挤压 */
    position:relative;
    z-index:1;
    gap:0.6rem;
    /* 关键修复：取消强制不换行，改为自动换行适配 */
    white-space:normal;
    /* 移动端宽度适配 */
    width:100%;
    box-sizing:border-box;
}
.warning-icon{
    color:#ff7d00;
    font-size:1.2rem;
    flex-shrink:0;
    min-width:1.5rem; /* 固定图标宽度，防止挤压 */
}
.warning-text{
    color:#6b4a27;
    font-size:0.9rem; /* 移动端缩小字体 */
    line-height:1.5;
    flex:1;
    font-weight:500;
    text-align:left; /* 文字左对齐，提升可读性 */
    word-wrap:break-word; /* 强制换行 */
    word-break:break-all; /* 兼容所有字符换行 */
}
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:.9rem 2.8rem;
    background:linear-gradient(90deg,#165dff,#7b61ff);
    color:#fff;
    border-radius:9999px;
    font-weight:600;
    text-decoration:none;
    box-shadow:0 6px 18px rgba(22,93,255,0.25);
    transition:all .3s ease;
    position:relative;
    overflow:hidden;
    font-size:1.1rem;
    z-index:1;
    margin-bottom:1rem;
}
.btn:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 22px rgba(22,93,255,0.35);
}
.btn::before{
    content:'';
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);
    transition:left .6s ease;
}
.btn:hover::before{left:100%}
.btn-icon{margin-left:.8rem;font-size:1.1rem;}
.footer{
    margin-top:0;
    color:#86909c;
    font-size:.9rem;
    position:relative;
    z-index:1;
}
#particles{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;background-color:transparent}
@keyframes countdown{0%{width:100%}100%{width:0%}}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.9;transform:scale(1.03)}}
@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}
@keyframes slideUp{0%{transform:translateY(20px);opacity:0}100%{transform:translateY(0);opacity:1}}
@keyframes float{
    0%,100%{transform:translate(0,0);}
    50%{transform:translate(15px,-15px);}
}
.animate-fadeIn{animation:fadeIn .8s ease-in forwards}
.animate-slideUp{animation:slideUp .8s ease-out forwards}
.animate-pulse{animation:pulse 2.5s infinite}
.scale-125{transform:scale(1.25)}
@supports not (backdrop-filter:blur(1px)){
    .card{background:rgba(240,245,255,.95);}
}

/* 移动端专属适配样式 */
@media (max-width: 768px) {
    .card{
        padding:1.5rem 1rem 1rem; /* 大幅减少移动端内边距 */
        max-width:95vw; /* 占满屏幕宽度 */
    }
    .warning-box{
        padding:0.8rem 0.6rem;
        gap:0.5rem;
    }
    .warning-text{
        font-size:0.85rem; /* 进一步缩小移动端字体 */
        line-height:1.4;
    }
    .warning-icon{
        font-size:1.1rem;
    }
    .btn{
        padding:0.8rem 2rem;
        font-size:1rem;
        width:90%; /* 移动端按钮宽度自适应 */
    }
    .countdown-text{
        font-size:1.2rem;
    }
    .countdown-number{
        font-size:1.8rem;
    }
}
</style>
</head>
<body>
    <canvas id="particles"></canvas>
    <div class="container">
        <div class="card animate-fadeIn">
            <div class="animate-slideUp" style="animation-delay: 0.2s;">
                <div class="logo-container animate-pulse">
                    <img src="https://cs.yykbk.com/wp-content/uploads/2026/02/20260226022816570-1111-scaled.webp" alt="LOGO" class="logo-img">
                </div>
            </div>

            <div class="animate-slideUp" style="animation-delay: 0.4s;">
                <p class="countdown-text">
                    您将在 
                    <span id="countdown" class="countdown-number">3</span> 
                    秒后进入外部页面
                </p>
                <div class="progress-container">
                    <div class="progress-bar"></div>
                </div>
            </div>

            <!-- 修复后的风险提示区域 -->
            <div class="warning-box animate-slideUp" style="animation-delay: 0.6s;">
                <div class="warning-icon">⚠️</div>
                <p class="warning-text">
                    网络有风险，交易需谨慎！如遇欺诈广告请联系: 优源库 投诉。
                </p>
            </div>

            <div class="animate-slideUp" style="animation-delay: 0.8s;">
                <a href="<?php echo $url_escaped; ?>" rel="external nofollow"  id="skipBtn" class="btn" rel="nofollow noopener" target="_blank">
                    <span>无需等待，点击进入</span>
                    <span class="btn-icon">→</span>
                </a>
            </div>

            <div class="footer animate-slideUp" style="animation-delay: 1s;">
                <p>© 2025 保留所有权利。</p>
            </div>
        </div>
    </div>

    <script>
        // 粒子背景核心逻辑 - 调暗粒子效果
        (function() {
            const canvas = document.getElementById('particles');
            const ctx = canvas.getContext('2d');
            let particles = [];

            function resizeCanvas() {
                canvas.width = window.innerWidth;
                canvas.height = window.innerHeight;
            }
            resizeCanvas();
            window.addEventListener('resize', resizeCanvas);

            class Particle {
                constructor() {
                    this.x = Math.random() * canvas.width;
                    this.y = Math.random() * canvas.height;
                    this.size = Math.random() * 3 + 1; 
                    this.speedX = Math.random() * 2 - 1; 
                    this.speedY = Math.random() * 2 - 1; 
                    this.color = '#0e42a8';/* 粒子颜色调暗 */
                    this.opacity = Math.random() * 0.4 + 0.1; /* 粒子透明度降低 */
                }

                update() {
                    this.x += this.speedX;
                    this.y += this.speedY;

                    if (this.x < 0 || this.x > canvas.width) this.speedX *= -1;
                    if (this.y < 0 || this.y > canvas.height) this.speedY *= -1;
                }

                draw() {
                    ctx.beginPath();
                    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
                    let opacityHex = Math.floor(this.opacity * 255).toString(16);
                    if (opacityHex.length === 1) opacityHex = '0' + opacityHex;
                    ctx.fillStyle = this.color + opacityHex;
                    ctx.fill();
                }
            }

            function connectParticles() {
                for (let a = 0; a < particles.length; a++) {
                    for (let b = a; b < particles.length; b++) {
                        const dx = particles[a].x - particles[b].x;
                        const dy = particles[a].y - particles[b].y;
                        const distance = Math.sqrt(dx * dx + dy * dy);

                        if (distance < 150) {
                            let opacity = 0.15 - distance/750;/* 连接线透明度降低 */
                            opacity = opacity < 0 ? 0 : opacity;
                            let opacityHex = Math.floor(opacity * 255).toString(16);
                            if (opacityHex.length === 1) opacityHex = '0' + opacityHex;

                            ctx.beginPath();
                            ctx.strokeStyle = particles[a].color + opacityHex;
                            ctx.lineWidth = 0.4;/* 连接线宽度减细 */
                            ctx.moveTo(particles[a].x, particles[a].y);
                            ctx.lineTo(particles[b].x, particles[b].y);
                            ctx.stroke();
                        }
                    }
                }
            }

            function initParticles() {
                particles = [];
                for (let i = 0; i < 70; i++) {/* 粒子数量减少 */
                    particles.push(new Particle());
                }
            }

            function animate() {
                ctx.clearRect(0, 0, canvas.width, canvas.height);

                for (let i = 0; i < particles.length; i++) {
                    particles[i].update();
                    particles[i].draw();
                }

                connectParticles();
                requestAnimationFrame(animate);
            }

            initParticles();
            animate();
        })();

        // 倒计时跳转逻辑
        (function() {
            let seconds = 3;
            const countdownEl = document.getElementById('countdown');
            const skipBtn = document.getElementById('skipBtn');
            const targetUrl = <?php echo json_encode($url); ?>;

            if (!targetUrl || !/^https?:\/\//i.test(targetUrl)) {
                countdownEl.textContent = "0";
                skipBtn.innerHTML = "<span>地址无效，返回首页</span><span class='btn-icon'>→</span>";
                skipBtn.href = "http://" + window.location.host;
                return;
            }

            const countdownInterval = setInterval(() => {
                seconds--;
                countdownEl.textContent = seconds;
                countdownEl.classList.add('scale-125');
                setTimeout(() => countdownEl.classList.remove('scale-125'), 300);

                if (seconds <= 0) {
                    clearInterval(countdownInterval);
                    if (!window.jumpInitiated) {
                        window.jumpInitiated = true;
                        setTimeout(() => window.location.href = targetUrl, 300);
                    }
                }
            }, 1000);

            window.addEventListener('beforeunload', () => clearInterval(countdownInterval));
            skipBtn.addEventListener('click', () => window.jumpInitiated = true);
        })();
    </script>
</body>
</html>