📚✨ Click to Show 🎉🌟
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>🎉 FlashFun Cards 🎉</title>
<style>
@keyframes rotate {
from { transform: rotateY(0deg); }
to { transform: rotateY(360deg); }
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-30px); }
60% { transform: translateY(-15px); }
}
.rotate-animation {
animation: rotate 1s;
}
.bounce-animation {
animation: bounce 1s;
}
</style>
</head>
<body>
<div style="width: 400px; height: 400px; margin: auto; padding: 20px; box-sizing: border-box; border: 2px solid #FFD700; border-radius: 15px; background: linear-gradient(135deg, #FFDEE9 0%, #B5FFFC 100%); position: relative; overflow: hidden;">
<div id="card" style="width: 100%; height: 70%; display: flex; align-items: center; justify-content: center; font-size: 24px; cursor: pointer; user-select: none; transition: transform 0.6s;">
📚✨ Click to Show 🎉🌟
</div>
<div style="width: 100%; height: 30%; display: flex; align-items: center; justify-content: space-around;">
<button onclick="prevCard()" style="padding: 10px 20px; font-size: 16px; border: none; border-radius: 10px; background-color: #FF6F61; color: white; cursor: pointer;">🔙 Prev</button>
<button onclick="flipCard()" style="padding: 10px 20px; font-size: 16px; border: none; border-radius: 10px; background-color: #6B5B95; color: white; cursor: pointer;">🔄 Flip</button>
<button onclick="nextCard()" style="padding: 10px 20px; font-size: 16px; border: none; border-radius: 10px; background-color: #88B04B; color: white; cursor: pointer;">Next ➡️</button>
</div>
<canvas id="confetti" width="400" height="400" style="position: absolute; top: 0; left: 0; pointer-events: none;"></canvas>
</div>
<script>
const cards = [
{ term: "🌍 Earth", definition: "The third planet from the Sun." },
{ term: "🔥 Fire", definition: "A chemical reaction that produces heat and light." },
{ term: "💧 Water", definition: "A transparent, tasteless, odorless liquid essential for life." },
{ term: "🌟 Star", definition: "A luminous sphere of plasma held together by gravity." },
{ term: "🪐 Planet", definition: "A celestial body moving in an elliptical orbit around a star." }
];
let current = 0;
let showingDefinition = false;
const card = document.getElementById('card');
const confetti = document.getElementById('confetti');
const ctx = confetti.getContext('2d');
let confettiParticles = [];
function renderCard() {
showingDefinition = false;
card.innerHTML = `${cards[current].term} 🎈✨`;
card.classList.remove('rotate-animation', 'bounce-animation');
}
function flipCard() {
card.classList.add('rotate-animation');
setTimeout(() => {
showingDefinition = !showingDefinition;
card.innerHTML = showingDefinition ? `${cards[current].definition} 💡📖` : `${cards[current].term} 🎈✨`;
card.classList.remove('rotate-animation');
card.classList.add('bounce-animation');
triggerConfetti();
}, 500);
}
function nextCard() {
current = (current + 1) % cards.length;
renderCard();
}
function prevCard() {
current = (current - 1 + cards.length) % cards.length;
renderCard();
}
function triggerConfetti() {
for (let i = 0; i < 100; i++) {
confettiParticles.push({
x: Math.random() * 400,
y: Math.random() * 400,
r: Math.random() * 4 + 1,
d: Math.random() * 50 + 10,
color: `hsl(${Math.random() * 360}, 100%, 50%)`,
tilt: Math.floor(Math.random() * 10) - 10
});
}
requestAnimationFrame(updateConfetti);
}
function updateConfetti() {
ctx.clearRect(0, 0, 400, 400);
confettiParticles.forEach((p, index) => {
p.y += Math.pow(p.d, 0.5);
p.x += Math.sin(p.y * 0.05);
ctx.beginPath();
ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
ctx.fillStyle = p.color;
ctx.fill();
if (p.y > 400) confettiParticles.splice(index, 1);
});
if (confettiParticles.length > 0) {
requestAnimationFrame(updateConfetti);
}
}
card.addEventListener('click', flipCard);
renderCard();
</script>
</body>
</html>
```