🎉✨ こんにちは！✨🎉

📅 📅
😀 🎈 🎂 🎁
```html
<!DOCTYPE html>
<html>
<head>
    <style>
        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
            40% { transform: translateY(-30px); }
            60% { transform: translateY(-15px); }
        }

        @keyframes sparkle {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }

        .emoji {
            animation: bounce 2s infinite;
            cursor: pointer;
        }

        .sparkle {
            animation: sparkle 1.5s infinite;
        }
    </style>
</head>
<body>
    <div style="width: 400px; height: 400px; margin: 0 auto; text-align: center; position: relative; background-color: #f0f8ff;">
        <h1 style="font-size: 24px; margin-top: 20px;">🎉✨ こんにちは！✨🎉</h1>
        <div style="font-size: 48px; margin: 20px 0;">
            📅 <?php echo date('Y年m月d日'); ?> 📅
        </div>
        <div>
            <span class="emoji" style="font-size: 50px;">😀</span>
            <span class="emoji" style="font-size: 50px;">🎈</span>
            <span class="emoji" style="font-size: 50px;">🎂</span>
            <span class="emoji" style="font-size: 50px;">🎁</span>
        </div>
        <button onclick="explode()" style="margin-top: 30px; padding: 10px 20px; font-size: 16px; border: none; border-radius: 10px; background-color: #ff69b4; color: white;">
            クリックして楽しもう！🎊
        </button>
        <canvas id="canvas" width="400" height="400" style="position: absolute; top: 0; left: 0;"></canvas>
    </div>

    <script>
        function explode() {
            const canvas = document.getElementById('canvas');
            const ctx = canvas.getContext('2d');
            const particles = [];

            for (let i = 0; i < 100; i++) {
                particles.push({
                    x: 200,
                    y: 200,
                    r: Math.random() * 4 + 1,
                    d: Math.random() * Math.PI * 2,
                    color: 'hsl(' + Math.random() * 360 + ', 100%, 50%)',
                    speed: Math.random() * 3 + 2
                });
            }

            function draw() {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                particles.forEach(p => {
                    ctx.beginPath();
                    ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2, false);
                    ctx.fillStyle = p.color;
                    ctx.fill();

                    p.x += Math.cos(p.d) * p.speed;
                    p.y += Math.sin(p.d) * p.speed;
                });
                requestAnimationFrame(draw);
            }

            draw();
        }

        document.querySelectorAll('.emoji').forEach(emoji => {
            emoji.addEventListener('click', () => {
                emoji.classList.add('sparkle');
                setTimeout(() => {
                    emoji.classList.remove('sparkle');
                }, 1500);
            });
        });
    </script>
</body>
</html>
```