3D 倾斜反光 (3D Perspective & Glare) · 特效源代码交互游乐场

实时源码编辑器 (HTML/CSS/JS) 支持 Tab 缩进
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>3D 倾斜反光 · 独立调试版</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            background: #0d1209;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            perspective: 1200px;
            font-family: system-ui, -apple-system, sans-serif;
        }
        
        .effect-container {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background: radial-gradient(circle at center, #1b2614 0%, #0d1209 100%);
        }
        
        /* 巨大3D倾斜展示卡 - 占据大半屏幕，震撼3D效果 */
        .card-tilt {
            position: relative;
            width: 460px;
            height: 280px;
            border-radius: 20px;
            background: rgba(20, 25, 20, 0.4);
            border: 1px solid rgba(255, 255, 255, 0.08);
            box-shadow: 0 15px 45px rgba(0, 0, 0, 0.5), 0 0 40px rgba(180, 230, 150, 0.15);
            transition: transform 0.1s ease, box-shadow 0.3s ease;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transform-style: preserve-3d;
            padding: 30px;
            box-sizing: border-box;
        }
        
        /* 多重浮起子元素，增强视差立体感 */
        .tilt-sub {
            font-size: 14px;
            font-weight: 600;
            color: #b4e696;
            text-transform: uppercase;
            letter-spacing: 0.4em;
            transform: translateZ(25px); /* 中等悬浮 */
            margin-bottom: 12px;
            text-shadow: 0 2px 5px rgba(0,0,0,0.3);
            pointer-events: none;
            user-select: none;
        }

        .tilt-core {
            font-size: 40px;
            font-weight: 900;
            color: #ffffff;
            text-shadow: 0 10px 20px rgba(0, 0, 0, 0.6);
            transform: translateZ(50px); /* 极高悬浮 */
            z-index: 3;
            pointer-events: none;
            letter-spacing: 0.15em;
            user-select: none;
        }
        
        .tilt-footer {
            margin-top: 20px;
            font-size: 11px;
            color: rgba(255, 255, 255, 0.35);
            letter-spacing: 0.2em;
            transform: translateZ(15px); /* 轻微悬浮 */
            pointer-events: none;
            user-select: none;
        }

        /* 更加绚丽的全宽反光效果 */
        .glare-effect {
            position: absolute;
            inset: 0;
            background: radial-gradient(
                circle 200px at var(--mouse-x, 50%) var(--mouse-y, 50%),
                rgba(255, 255, 255, 0.22) 0%,
                transparent 80%
            );
            z-index: 2;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.4s ease;
            border-radius: 20px;
        }
        
        .card-tilt:hover .glare-effect {
            opacity: 1;
        }
    </style>
</head>
<body>
    <div class="effect-container" id="space-zone">
        <div class="card-tilt" id="tilt-card-box">
            <div class="glare-effect"></div>
            <div class="tilt-sub">Gateway of Future</div>
            <div class="tilt-core">3D HORIZON</div>
            <div class="tilt-footer">摇曳指针 · 唤醒深度视差</div>
        </div>
    </div>

    <script>
        const zone = document.getElementById("space-zone");
        const tiltCard = document.getElementById("tilt-card-box");
        
        zone.addEventListener("mousemove", (e) => {
            const rect = tiltCard.getBoundingClientRect();
            const width = rect.width;
            const height = rect.height;
            
            // 计算鼠标相对于卡片中心的位置
            const cardCenterX = rect.left + width / 2;
            const cardCenterY = rect.top + height / 2;
            
            const mouseXFromCenter = e.clientX - cardCenterX;
            const mouseYFromCenter = e.clientY - cardCenterY;
            
            // 最大倾斜角度
            const maxTilt = 25;
            // 归一化偏差 (-1 到 1)
            const xPercent = mouseXFromCenter / (window.innerWidth / 2);
            const yPercent = mouseYFromCenter / (window.innerHeight / 2);
            
            // 设置反光的光源位置 (相对于卡片内部)
            const cardMouseX = e.clientX - rect.left;
            const cardMouseY = e.clientY - rect.top;
            tiltCard.style.setProperty("--mouse-x", (cardMouseX / width) * 100 + "%");
            tiltCard.style.setProperty("--mouse-y", (cardMouseY / height) * 100 + "%");
            
            const rotateX = (-yPercent * maxTilt).toFixed(2);
            const rotateY = (xPercent * maxTilt).toFixed(2);
            
            tiltCard.style.transform = "rotateX(" + rotateX + "deg) rotateY(" + rotateY + "deg) scale3d(1.02, 1.02, 1.02)";
        });
        
        zone.addEventListener("mouseleave", () => {
            tiltCard.style.transform = "rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)";
            tiltCard.style.setProperty("--mouse-x", "50%");
            tiltCard.style.setProperty("--mouse-y", "50%");
        });
    </script>
</body>
</html>
实时渲染沙盒视窗 (Sandboxed Sandbox) 实时可交互