做一个简单的中秋快乐的html做一个简单的中秋快乐的html,来展示出月亮、灯笼、星空以及灯笼上会放置中秋快乐的字体，只

效果如下:

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>中秋快乐</title>
    <style>
        body {
            background-color: #002244;
            overflow: hidden;
            margin: 0;
            padding: 0;
        }

        .moon {
            position: absolute;
            top: 10%;
            left: 50%;
            width: 100px;
            height: 100px;
            background-color: #FFFDD0;
            border-radius: 50%;
            box-shadow: 0 0 50px #FFFDD0;
            z-index: 1;
        }

        .star {
            position: absolute;
            background-color: white;
            width: 2px;
            height: 2px;
            border-radius: 50%;
        }

        .lantern {
            position: absolute;
            width: 60px;
            height: 90px;
            background-color: red;
            border-radius: 10px;
            opacity: 0.9;
            box-shadow: 0 0 5px rgba(0,0,0,0.4);
            overflow: visible;
        }

        .text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-family: 'Arial', sans-serif;
            color: white;
            font-weight: bold;
            font-size: 14px;
        }

        .candle {
            position: absolute;
            bottom: -15px;
            left: 50%;
            transform: translateX(-50%);
            width: 20px;
            height: 15px;
            background-color: #FFE4B5;
            border-radius: 2px 2px 10px 10px;
            box-shadow: 0 -2px 5px #FFD700;
        }

        .flame {
            position: absolute;
            top: -7px;
            left: 50%;
            transform: translateX(-50%);
            width: 12px;
            height: 12px;
            background-color: #FFD700;
            border-radius: 50%;
            box-shadow: 0 0 5px #FFD700;
        }
    </style>
</head>
<body>
    <div class="moon"></div>

    <script>
        // Add stars
        for (let i = 0; i < 100; i++) {
            let star = document.createElement('div');
            star.classList.add('star');
            star.style.top = `${Math.random() * window.innerHeight}px`;
            star.style.left = `${Math.random() * window.innerWidth}px`;
            document.body.appendChild(star);
        }

        // Add lanterns
        for (let i = 0; i < 10; i++) {
            let lantern = document.createElement('div');
            lantern.classList.add('lantern');
            lantern.style.top = `${Math.random() * window.innerHeight}px`;
            lantern.style.left = `${Math.random() * window.innerWidth}px`;

            let text = document.createElement('div');
            text.classList.add('text');
            text.textContent = '中秋快乐';

            let candle = document.createElement('div');
            candle.classList.add('candle');

            let flame = document.createElement('div');
            flame.classList.add('flame');

            candle.appendChild(flame);
            lantern.appendChild(text);
            lantern.appendChild(candle);
            document.body.appendChild(lantern);
        }

        // Animate lanterns
        let lanterns = document.querySelectorAll('.lantern');
        setInterval(() => {
            lanterns.forEach(lantern => {
                lantern.style.top = `${parseInt(lantern.style.top) - 1}px`;
                if (parseInt(lantern.style.top) < -110) {
                    lantern.style.top = `${window.innerHeight}px`;
                    lantern.style.left = `${Math.random() * window.innerWidth}px`;
                }
            });
        }, 30);
    </script>
</body>
</html>