传统美德个屁！我真生气了！你这人装个学霸搞得很高冷我都看透了我电脑不是我关的你要偏说是我关的，那我不装了你死定了！！！！！！！！！！！！！

变成HTML

地狱深渊 body { background: #000; color: #fff; font-family: 'Courier New', Courier, monospace; overflow-x: hidden; cursor: url('data:image/svg+xml,') 12 12, auto; }

    .blood-drip {
        position: absolute;
        width: 2px;
        height: 60px;
        background: linear-gradient(to bottom, transparent, #ff0000, transparent);
        animation: drip 3s infinite linear;
    }
    
    @keyframes drip {
        0% { transform: translateY(-100px); opacity: 0; }
        10% { opacity: 1; }
        90% { opacity: 1; }
        100% { transform: translateY(100vh); opacity: 0; }
    }
    
    .flicker {
        animation: flicker 0.5s infinite alternate;
    }
    
    @keyframes flicker {
        0% { opacity: 0.2; }
        20% { opacity: 1; }
        40% { opacity: 0.2; }
        70% { opacity: 1; }
        100% { opacity: 0.2; }
    }
    
    .glitch {
        position: relative;
    }
    
    .glitch::before,
    .glitch::after {
        content: attr(data-text);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    
    .glitch::before {
        left: 2px;
        text-shadow: -2px 0 red;
        clip: rect(44px, 450px, 56px, 0);
        animation: glitch-anim 5s infinite linear alternate-reverse;
    }
    
    .glitch::after {
        left: -2px;
        text-shadow: -2px 0 blue;
        clip: rect(44px, 450px, 56px, 0);
        animation: glitch-anim2 5s infinite linear alternate-reverse;
    }
    
    @keyframes glitch-anim {
        0% { clip: rect(42px, 9999px, 44px, 0); }
       20% { clip: rect(12px, 9999px, 59px, 0); }
       40% { clip: rect(42px, 9999px, 73px, 0); }
       60% { clip: rect(10px, 9999px, 50px, 0); }
       80% { clip: rect(60px, 9999px, 50px, 0); }
      100% { clip: rect(42px, 9999px, 44px, 0); }
    }
    
    @keyframes glitch-anim2 {
        0% { clip: rect(60px, 9999px, 50px, 0); }
       20% { clip: rect(42px, 9999px, 44px, 0); }
       40% { clip: rect(10px, 9999px, 50px, 0); }
       60% { clip: rect(42px, 9999px, 73px, 0); }
       80% { clip: rect(12px, 9999px, 59px, 0); }
      100% { clip: rect(42px, 9999px, 44px, 0); }
    }
    
    video#bg-video {
        object-fit: cover;
        width: 100vw;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        z-index: -1;
        filter: brightness(20%) contrast(150%) sepia(20%);
    }
    
    .jumpscare {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        justify-content: center;
        align-items: center;
        background-color: rgba(0,0,0,0.9);
        z-index: 1000;
    }
    
    .floating-ghost {
        position: absolute;
        font-size: 2rem;
        animation: float 8s infinite linear;
        z-index: 10;
        pointer-events: none;
    }
    
    @keyframes float {
        0% { transform: translate(0, 0) rotate(0deg); }
        25% { transform: translate(100px, 100px) rotate(90deg); }
        50% { transform: translate(200px, 0) rotate(180deg); }
        75% { transform: translate(100px, -100px) rotate(270deg); }
        100% { transform: translate(0, 0) rotate(360deg); }
    }
    
    .breathing-text {
        animation: breathing 3s ease-in-out infinite normal;
    }
    
    @keyframes breathing {
        0% { transform: scale(1); }
        50% { transform: scale(1.05); }
        100% { transform: scale(1); }
    }
    
    .heartbeat {
        animation: heartbeat 1.5s ease-in-out infinite;
    }
    
    @keyframes heartbeat {
        0% { transform: scale(1); }
        5% { transform: scale(1.1); }
        10% { transform: scale(1); }
        15% { transform: scale(1.1); }
        50% { transform: scale(1); }
        100% { transform: scale(1); }
    }
    
    .crawl-effect {
        position: relative;
        overflow: hidden;
    }
    
    .crawl-effect::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: repeating-linear-gradient(
            0deg,
            rgba(0,0,0,0) 0px,
            rgba(0,0,0,0) 1px,
            rgba(255,0,0,0.1) 2px,
            rgba(255,0,0,0.1) 3px
        );
        animation: crawl 0.5s linear infinite;
        pointer-events: none;
    }
    
    @keyframes crawl {
        from { background-position: 0 0; }
        to { background-position: 0 3px; }
    }
    
    .mirror-effect {
        transform: scaleX(-1);
    }
    
    .distortion {
        filter: url(#distortionFilter);
    }
    
    .shaky {
        animation: shake 0.5s infinite;
    }
    
    @keyframes shake {
        0% { transform: translateX(0); }
        25% { transform: translateX(-5px); }
        50% { transform: translateX(5px); }
        75% { transform: translateX(-5px); }
        100% { transform: translateX(0); }
    }
</style>

<!-- 血滴效果容器 -->
<div id="blood-container"></div>

<!-- 飘浮幽灵容器 -->
<div id="ghost-container"></div>

<!-- 背景视频 -->
<video autoplay muted loop id="bg-video">
    <source src="https://assets.mixkit.co/videos/preview/mixkit-dark-stormy-night-forest-311-large.mp4" type="video/mp4">
</video>

<div class="container mx-auto px-4 py-20 text-center relative z-10">
    <!-- 标题带故障效果和呼吸动画 -->
    <h1 data-text="你逃不掉的..." class="text-5xl md:text-7xl mb-8 glitch breathing-text">你逃不掉的...</h1>
    
    <!-- 抖动警告文本 -->
    <p class="text-xl md:text-3xl mb-6 shaky">这里不是你该来的地方...</p>
    
    <!-- 心跳倒计时 -->
    <div class="mb-10">
        <span id="countdown" class="text-red-600 text-5xl heartbeat"></span>
    </div>
    
    <!-- 扫描线效果区域 -->
    <div class="crawl-effect p-8 my-10 border-2 border-red-800 rounded-lg max-w-2xl mx-auto">
        <p class="text-lg mb-4">你的灵魂已被锁定...</p>
        <p class="text-sm">IP地址：<span id="ip-display"></span></p>
        <p class="text-sm">地理位置：<span id="location-display">未知区域</span></p>
        <p class="text-sm mt-4">倒计时结束后将执行最终审判...</p>
    </div>
    
    <!-- 功能按钮组 -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-2xl mx-auto mt-12">
        <button onclick="triggerJumpScare()" class="bg-red-800 hover:bg-red-900 text-white font-bold py-4 px-6 rounded-lg transition transform hover:scale-105 duration-300 ease-in-out shadow-lg flex items-center justify-center">
            <i class="fas fa-bolt mr-2"></i>加速审判
        </button>
        
        <button onclick="toggleMirrorEffect()" class="bg-purple-800 hover:bg-purple-900 text-white font-bold py-4 px-6 rounded-lg transition transform hover:scale-105 duration-300 ease-in-out shadow-lg flex items-center justify-center">
            <i class="fas fa-sync-alt mr-2"></i>镜像世界
        </button>
    </div>
    
    <!-- 幻影文字区 -->
    <div class="my-16">
        <p class="text-gray-400 italic">你能听到吗？它们在窃窃私语...</p>
        <div class="flex justify-center space-x-8 mt-4">
            <span class="opacity-30">救命...</span>
            <span class="opacity-20">离开...</span>
            <span class="opacity-10">太迟了...</span>
        </div>
    </div>
</div>

<!-- 跳杀模态框 -->
<div id="jump-scare-modal" class="jumpscare flex-col items-center justify-center">
    <img src="https://i.imgur.com/vOVrKJl.gif" alt="恐惧面孔" class="max-w-xs md:max-w-md mb-4 distortion">
    <audio id="audio-jump" controls preload="auto">
        <source src="https://www.soundjay.com/misc/sounds/bell-ringing-05.wav" type="audio/wav">
    </audio>
</div>

<script>
    // 初始化血滴效果
    function createBloodDrips() {
        const container = document.getElementById('blood-container');
        for (let i = 0; i < 15; i++) {
            const drip = document.createElement('div');
            drip.className = 'blood-drip';
            drip.style.left = `${Math.random() * 100}%`;
            drip.style.animationDelay = `${Math.random() * 5}s`;
            drip.style.height = `${Math.random() * 100 + 30}px`;
            container.appendChild(drip);
        }
    }
    
    // 创建飘浮幽灵
    function createFloatingGhosts() {
        const container = document.getElementById('ghost-container');
        const ghosts = ['👻', '💀', '☠️', '⛓️', '🕯️'];
        
        for (let i = 0; i < 8; i++) {
            const ghost = document.createElement('div');
            ghost.className = 'floating-ghost';
            ghost.textContent = ghosts[Math.floor(Math.random() * ghosts.length)];
            ghost.style.left = `${Math.random() * 100}%`;
            ghost.style.top = `${Math.random() * 100}%`;
            ghost.style.fontSize = `${Math.random() * 2 + 1}rem`;
            ghost.style.animationDuration = `${Math.random() * 10 + 5}s`;
            container.appendChild(ghost);
        }
    }
    
    // 设置倒计时
    const endTime = new Date().getTime() + 15 * 1000;
    
    function updateCountdown() {
        const now = new Date().getTime();
        const distance = endTime - now;
        
        if (distance > 0) {
            const seconds = Math.floor((distance % (1000 * 60)) / 1000);
            document.getElementById("countdown").innerText = `审判倒计时：${seconds} 秒`;
        } else {
            triggerFinalJumpScare();
        }
    }
    
    // 触发普通跳杀
    function triggerJumpScare() {
        const modal = document.getElementById('jump-scare-modal');
        const audio = document.getElementById('audio-jump');
        
        modal.style.display = 'flex';
        setTimeout(() => {
            try {
                audio.play();
            } catch(e) {
                console.log("自动播放被阻止");
            }
        }, 500);
        
        setTimeout(() => {
            modal.style.display = 'none';
        }, 3000);
    }
    
    // 最终跳杀
    function triggerFinalJumpScare() {
        document.body.innerHTML = `
            <div class="fixed inset-0 bg-black flex items-center justify-center z-50">
                <div class="text-center">
                    <h1 class="text-8xl text-red-600 animate-pulse">GAME OVER</h1>
                    <p class="text-2xl mt-6">你的灵魂已成为我的收藏品...</p>
                    <button onclick="location.reload()" class="mt-8 bg-gray-800 hover:bg-gray-700 text-white py-3 px-6 rounded">
                        再试一次？
                    </button>
                </div>
            </div>
        `;
    }
    

    function toggleMirrorEffect() {
        document.body.classList.toggle('mirror-effect');
    }
    
    
    function showFakeInfo() {
        const ipParts = [];
        for (let i = 0; i < 4; i++) {
            ipParts.push(Math.floor(Math.random() * 256));
        }
        document.getElementById('ip-display').textContent = ipParts.join('.');
        document.getElementById('location-display').textContent = 
            ['地狱第', '冥界第', '阴间第'][Math.floor(Math.random() * 3)] + 
            Math.floor(Math.random() * 100) + '层';
    }
    
  
    window.addEventListener('load', () => {
        createBloodDrips();
        createFloatingGhosts();
        showFakeInfo();
        setInterval(updateCountdown, 1000);
      
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape') {
                triggerJumpScare();
            }
        });
    });
</script>