console 命令行工具 X clear
console
<!DOCTYPE html>
<html>
<head>
    <title>彬彬❤清清</title>
    <style>
        body {
            background: #fff0f5;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            overflow: hidden;
            font-family: 'Microsoft YaHei', sans-serif;
        }

        .container {
            position: relative;
            width: 600px;
            height: 300px;
        }

        .main-heart {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            font-size: 120px;
            color: #ff69b4;
            animation: heartbeat 1.8s ease-in-out infinite;
            text-shadow: 0 0 15px rgba(255,105,180,0.3);
            z-index: 1;
        }

        .name {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            font-size: 42px;
            color: #ff1493;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
            white-space: nowrap;
            z-index: 2;
        }

        .name-left {
            right: 65%;
        }

        .name-right {
            left: 65%;
        }

        .hearts-container {
            position: absolute;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 3;
        }

        .floating-heart {
            position: absolute;
            animation: float 4s linear forwards;
            font-size: 20px;
            opacity: 0.8;
        }

        @keyframes heartbeat {
            0%, 100% { transform: translate(-50%, -50%) scale(1); }
            50% { transform: translate(-50%, -50%) scale(1.15); }
        }

        @keyframes float {
            0% {
                transform: translateY(0) scale(0.8);
                opacity: 0;
            }
            20% {
                opacity: 1;
            }
            100% {
                transform: translateY(-100vh) scale(1.2);
                opacity: 0;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="name name-left">彬彬</div>
        <div class="name name-right">清清</div>
        <div class="main-heart">♡</div>
        <div class="hearts-container"></div>
    </div>

    <script>
        const MAX_HEARTS = 52;
        let heartsCount = 0;
        const namePositions = {
            left: { x: 0, y: 0 },
            right: { x: 0, y: 0 }
        };

        function updateNamePositions() {
            const container = document.querySelector('.container');
            const rect = container.getBoundingClientRect();
            
            namePositions.left = {
                x: rect.left + rect.width * 0.3,
                y: rect.top + rect.height * 0.7
            };
            
            namePositions.right = {
                x: rect.left + rect.width * 0.7,
                y: rect.top + rect.height * 0.7
            };
        }

        function createHeart() {
            if(heartsCount >= MAX_HEARTS) return;

            const container = document.querySelector('.hearts-container');
            const isLeft = Math.random() > 0.5;
            const position = isLeft ? namePositions.left : namePositions.right;
            
            const heart = document.createElement('div');
            heart.className = 'floating-heart';
            heart.innerHTML = '❤';
            
            const size = 0.8 + Math.random() * 0.4;
            const colorValue = Math.floor(200 + Math.random() * 55);
            const drift = (Math.random() - 0.5) * 80;
            
            heart.style.cssText = `
                left: ${position.x + drift}px;
                top: ${position.y}px;
                color: rgba(255,${colorValue - 50},${colorValue},0.9);
                font-size: ${size}em;
                animation-duration: ${3 + Math.random() * 2}s;
            `;

            container.appendChild(heart);
            heartsCount++;

            heart.addEventListener('animationend', () => {
                heart.remove();
                heartsCount--;
            });
        }

        updateNamePositions();
        window.addEventListener('resize', updateNamePositions);
        setInterval(() => heartsCount < MAX_HEARTS && createHeart(), 200);
    </script>
</body>
</html>