console
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>吴木娟23岁生日贺卡</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#FF6B8B',
secondary: '#FFD166',
accent: '#06D6A0',
dark: '#073B4C',
light: '#F7F9FC',
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
},
}
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.text-shadow {
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.text-shadow-lg {
text-shadow: 0 4px 8px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);
}
.animate-float {
animation: float 3s ease-in-out infinite;
}
.animate-float-delay-1 {
animation: float 3s ease-in-out 0.5s infinite;
}
.animate-float-delay-2 {
animation: float 3s ease-in-out 1s infinite;
}
.animate-sparkle {
animation: sparkle 1.5s ease-in-out infinite;
}
.animate-sparkle-delay-1 {
animation: sparkle 1.5s ease-in-out 0.3s infinite;
}
.animate-sparkle-delay-2 {
animation: sparkle 1.5s ease-in-out 0.6s infinite;
}
.animate-fadeIn {
animation: fadeIn 0.5s ease-in-out forwards;
}
.animate-scaleIn {
animation: scaleIn 0.5s ease-out forwards;
}
}
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0px); }
}
@keyframes sparkle {
0% { opacity: 0; transform: scale(0.8); }
50% { opacity: 1; transform: scale(1.2); }
100% { opacity: 0; transform: scale(0.8); }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes scaleIn {
from { transform: scale(0.9); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
</style>
</head>
<body class="min-h-screen bg-gradient-to-br from-light to-pink-100 overflow-x-hidden">
<div class="fixed inset-0 pointer-events-none">
<div class="absolute top-0 left-0 w-full h-full">
<div class="absolute top-[10%] left-[5%] text-secondary animate-sparkle text-2xl">
<i class="fa fa-star"></i>
</div>
<div class="absolute top-[20%] right-[10%] text-primary animate-sparkle-delay-1 text-xl">
<i class="fa fa-star"></i>
</div>
<div class="absolute top-[30%] left-[15%] text-accent animate-sparkle-delay-2 text-lg">
<i class="fa fa-star"></i>
</div>
<div class="absolute top-[40%] right-[20%] text-secondary animate-sparkle text-xl">
<i class="fa fa-star"></i>
</div>
<div class="absolute top-[50%] left-[25%] text-primary animate-sparkle-delay-1 text-lg">
<i class="fa fa-star"></i>
</div>
<div class="absolute top-[60%] right-[15%] text-accent animate-sparkle-delay-2 text-2xl">
<i class="fa fa-star"></i>
</div>
<div class="absolute top-[70%] left-[10%] text-secondary animate-sparkle text-xl">
<i class="fa fa-star"></i>
</div>
<div class="absolute top-[80%] right-[5%] text-primary animate-sparkle-delay-1 text-lg">
<i class="fa fa-star"></i>
</div>
</div>
</div>
<div class="min-h-screen flex items-center justify-center p-4 relative z-10">
<div id="card" class="bg-white rounded-2xl shadow-2xl p-6 md:p-8 w-full max-w-md transition-all duration-500 transform hover:shadow-xl animate-scaleIn">
<div id="card-cover" class="absolute inset-0 bg-gradient-to-br from-primary to-pink-500 rounded-2xl flex flex-col items-center justify-center p-6 cursor-pointer z-30 transition-all duration-700 transform hover:scale-[1.02]">
<h1 class="text-[clamp(2rem,8vw,3.5rem)] font-bold text-white text-shadow-lg mb-4 animate-float">
<span class="block text-center">生日快乐</span>
</h1>
<h2 class="text-[clamp(1.5rem,5vw,2.5rem)] font-bold text-white text-shadow-lg mb-8 animate-float-delay-1">
<span class="block text-center">吴木娟</span>
</h2>
<p class="text-[clamp(1rem,3vw,1.25rem)] text-white text-shadow text-center max-w-md animate-float-delay-2">
点击开启你的23岁新篇章
</p>
<div class="absolute bottom-6 text-white text-xl animate-bounce">
<i class="fa fa-chevron-down"></i>
</div>
</div>
<div id="card-content" class="opacity-0 pointer-events-none transition-opacity duration-500 delay-300">
<div class="relative w-full h-56 md:h-64 mb-6 flex items-center justify-center">
<svg viewBox="0 0 400 300" class="w-full h-full max-w-xs">
<rect x="100" y="220" width="200" height="40" rx="10" ry="10" fill="#D4A373" />
<rect x="110" y="200" width="180" height="20" rx="5" ry="5" fill="#E9EDC9" />
<rect x="120" y="150" width="160" height="50" rx="10" ry="10" fill="#D4A373" />
<rect x="130" y="130" width="140" height="20" rx="5" ry="5" fill="#E9EDC9" />
<rect x="140" y="90" width="120" height="40" rx="8" ry="8" fill="#D4A373" />
<rect x="150" y="70" width="100" height="20" rx="5" ry="5" fill="#E9EDC9" />
<rect x="195" y="60" width="10" height="40" fill="#FF6B8B" />
<rect x="215" y="60" width="10" height="40" fill="#06D6A0" />
<rect x="175" y="60" width="10" height="40" fill="#118AB2" />
<rect x="235" y="60" width="10" height="40" fill="#FFD166" />
<path d="M195 55 Q200 45 205 55 T215 55" fill="#FFD166" class="animate-float" />
<path d="M215 55 Q220 45 225 55 T235 55" fill="#FFD166" class="animate-float" />
<path d="M175 55 Q180 45 185 55 T195 55" fill="#FFD166" class="animate-float" />
<path d="M235 55 Q240 45 245 55 T255 55" fill="#FFD166" class="animate-float" />
<path d="M140 90 Q200 75 260 90" fill="#FAEDCD" />
<path d="M140 90 Q170 80 200 90" fill="#FAEDCD" />
<path d="M200 90 Q230 80 260 90" fill="#FAEDCD" />
<circle cx="160" cy="85" r="5" fill="#FF6B8B" />
<circle cx="180" cy="80" r="5" fill="#06D6A0" />
<circle cx="200" cy="85" r="5" fill="#118AB2" />
<circle cx="220" cy="80" r="5" fill="#FFD166" />
<circle cx="240" cy="85" r="5" fill="#FF6B8B" />
</svg>
<div class="absolute top-1/4 left-1/2 transform -translate-x-1/2 flex -space-x-2">
<div class="text-[clamp(2.5rem,10vw,4rem)] font-bold text-primary animate-float">2</div>
<div class="text-[clamp(2.5rem,10vw,4rem)] font-bold text-primary animate-float-delay-1">3</div>
</div>
</div>
<div class="mb-6 animate-fadeIn" style="animation-delay: 0.3s;">
<h2 class="text-[clamp(1.25rem,5vw,1.75rem)] font-bold text-dark mb-4 text-center">致亲爱的吴木娟</h2>
<p class="text-[clamp(1rem,3vw,1.15rem)] text-gray-700 mb-3 leading-relaxed text-center">
愿你的23岁如这蛋糕般甜蜜，如烛光般灿烂。
</p>
<p class="text-[clamp(1rem,3vw,1.15rem)] text-gray-700 mb-3 leading-relaxed text-center">
这一年，愿你继续兴致盎然地与世界交手，一直走在充满鲜花的道路上。
</p>
<p class="text-[clamp(1rem,3vw,1.15rem)] text-gray-700 leading-relaxed text-center">
生日快乐，永远年轻，永远保持热爱！
</p>
</div>
<div class="flex flex-col items-center animate-fadeIn" style="animation-delay: 0.6s;">
<button id="blow-candle" class="bg-primary hover:bg-pink-600 text-white font-bold py-3 px-8 rounded-full shadow-lg transition-all duration-300 transform hover:scale-105 hover:shadow-xl w-full">
吹蜡烛
</button>
<div id="wish-input" class="mt-5 w-full hidden">
<textarea placeholder="输入你的生日愿望..." class="w-full p-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all text-base"></textarea>
<button id="make-wish" class="mt-3 w-full bg-accent hover:bg-teal-600 text-white font-bold py-3 px-6 rounded-lg shadow transition-all duration-300">
许下愿望
</button>
</div>
</div>
</div>
</div>
</div>
<div id="fireworks" class="fixed inset-0 pointer-events-none z-50"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const cardCover = document.getElementById('card-cover');
const cardContent = document.getElementById('card-content');
const blowCandleBtn = document.getElementById('blow-candle');
const wishInput = document.getElementById('wish-input');
const makeWishBtn = document.getElementById('make-wish');
const fireworksContainer = document.getElementById('fireworks');
cardCover.addEventListener('click', function() {
cardCover.style.transform = 'translateY(-100%)';
cardCover.style.opacity = '0';
cardCover.style.pointerEvents = 'none';
cardContent.style.opacity = '1';
cardContent.style.pointerEvents = 'auto';
playBirthdaySong();
});
blowCandleBtn.addEventListener('click', function() {
const flames = document.querySelectorAll('path[fill="#FFD166"]');
flames.forEach(flame => {
flame.style.opacity = '0';
});
wishInput.classList.remove('hidden');
wishInput.classList.add('animate-fadeIn');
blowCandleBtn.textContent = '蜡烛已熄灭';
blowCandleBtn.disabled = true;
blowCandleBtn.classList.add('bg-gray-400');
blowCandleBtn.classList.remove('bg-primary', 'hover:bg-pink-600');
});
makeWishBtn.addEventListener('click', function() {
const wishText = document.querySelector('textarea').value;
if (wishText.trim() === '') {
alert('请输入你的愿望哦！');
return;
}
wishInput.classList.add('hidden');
createFireworks();
const message = document.createElement('div');
message.className = 'fixed inset-0 flex items-center justify-center bg-black bg-opacity-70 z-50 p-4';
message.innerHTML = `
<div class="bg-white p-6 rounded-2xl shadow-2xl max-w-md w-full text-center animate-scaleIn">
<h2 class="text-xl font-bold text-primary mb-3">愿望已许下</h2>
<p class="text-gray-700 mb-4">你的愿望: "${wishText}"</p>
<p class="text-gray-700 mb-5">愿你的愿望都能实现！</p>
<button id="close-message" class="bg-primary hover:bg-pink-600 text-white font-bold py-2 px-6 rounded-full transition-all duration-300">
关闭
</button>
</div>
`;
document.body.appendChild(message);
document.getElementById('close-message').addEventListener('click', function() {
document.body.removeChild(message);
});
});
function createFireworks() {
fireworksContainer.innerHTML = '';
for (let i = 0; i < 15; i++) {
setTimeout(() => {
const firework = document.createElement('div');
const size = Math.random() * 10 + 5;
const x = Math.random() * 100;
const y = Math.random() * 100;
const colors = ['#FF6B8B', '#06D6A0', '#118AB2', '#FFD166', '#9381FF'];
const color = colors[Math.floor(Math.random() * colors.length)];
firework.className = 'absolute rounded-full';
firework.style.width = `${size}px`;
firework.style.height = `${size}px`;
firework.style.backgroundColor = color;
firework.style.left = `${x}%`;
firework.style.top = `${y}%`;
firework.style.boxShadow = `0 0 ${size*2}px ${size}px ${color}88`;
firework.style.opacity = '0';
fireworksContainer.appendChild(firework);
setTimeout(() => {
firework.style.transition = 'opacity 0.5s ease-out';
firework.style.opacity = '1';
setTimeout(() => {
firework.style.opacity = '0';
setTimeout(() => {
fireworksContainer.removeChild(firework);
}, 500);
}, 800);
}, 10);
}, i * 300);
}
}
function playBirthdaySong() {
try {
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
const oscillator = audioCtx.createOscillator();
const gainNode = audioCtx.createGain();
oscillator.connect(gainNode);
gainNode.connect(audioCtx.destination);
gainNode.gain.value = 0.1;
oscillator.type = 'sine';
const notes = [659, 659, 698, 659, 784, 740, 659, 659, 698, 659, 880, 784, 659, 659, 1318, 1046, 784, 740, 698, 988, 988, 784, 880, 784];
const durations = [0.25, 0.25, 0.5, 0.5, 0.5, 0.5, 0.25, 0.25, 0.5, 0.5, 0.5, 0.5, 0.25, 0.25, 0.5, 0.5, 0.5, 0.5, 0.5, 0.25, 0.25, 0.5, 0.5, 0.75];
oscillator.start();
let time = audioCtx.currentTime;
notes.forEach((note, index) => {
oscillator.frequency.setValueAtTime(note, time);
time += durations[index];
});
oscillator.stop(time);
} catch (e) {
console.log('音频播放需要用户交互');
}
}
});
</script>
</body>
</html>