| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Casino Win Animation</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/lucide@latest"></script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800;900&display=swap'); |
| |
| body { |
| font-family: 'Inter', sans-serif; |
| overflow: hidden; |
| background: #0a0a0a; |
| } |
| |
| |
| .slot-background { |
| position: absolute; |
| inset: 0; |
| background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f0f23 100%); |
| filter: blur(12px) brightness(0.4); |
| transform: scale(1.1); |
| } |
| |
| .reels-container { |
| position: absolute; |
| inset: 0; |
| display: grid; |
| grid-template-columns: repeat(5, 1fr); |
| gap: 2rem; |
| padding: 4rem; |
| opacity: 0.6; |
| } |
| |
| .reel { |
| background: linear-gradient(180deg, #2a2a4a 0%, #1a1a2e 100%); |
| border-radius: 1rem; |
| border: 2px solid rgba(255, 215, 0, 0.1); |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| justify-content: space-around; |
| padding: 1rem; |
| box-shadow: inset 0 0 30px rgba(0,0,0,0.5); |
| } |
| |
| .slot-symbol { |
| font-size: 3rem; |
| filter: drop-shadow(0 0 10px currentColor); |
| opacity: 0.8; |
| } |
| |
| |
| .vignette { |
| position: absolute; |
| inset: 0; |
| background: radial-gradient(circle at center, transparent 0%, rgba(0,0,0,0.8) 70%, rgba(0,0,0,0.95) 100%); |
| pointer-events: none; |
| } |
| |
| |
| .popup-card { |
| position: absolute; |
| width: 280px; |
| height: 90px; |
| background: linear-gradient(135deg, #ffd700 0%, #ffed4e 25%, #ffd700 50%, #ffed4e 75%, #ffd700 100%); |
| background-size: 200% 200%; |
| border-radius: 16px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| box-shadow: |
| 0 20px 60px rgba(255, 215, 0, 0.4), |
| 0 0 0 4px rgba(255, 215, 0, 0.3), |
| inset 0 2px 10px rgba(255, 255, 255, 0.5), |
| inset 0 -2px 10px rgba(0, 0, 0, 0.1); |
| transform-origin: center center; |
| opacity: 0; |
| transform: scale(0) translateY(50px) rotateX(-45deg); |
| } |
| |
| .popup-card::before { |
| content: ''; |
| position: absolute; |
| inset: 0; |
| border-radius: 16px; |
| background: linear-gradient(180deg, rgba(255,255,255,0.4) 0%, transparent 50%, rgba(0,0,0,0.1) 100%); |
| pointer-events: none; |
| } |
| |
| .popup-card::after { |
| content: ''; |
| position: absolute; |
| top: -2px; |
| left: -2px; |
| right: -2px; |
| bottom: -2px; |
| border-radius: 18px; |
| background: linear-gradient(135deg, #ffd700, #ffed4e, #ffd700); |
| z-index: -1; |
| filter: blur(8px); |
| opacity: 0.6; |
| } |
| |
| .popup-text { |
| font-size: 1.75rem; |
| font-weight: 900; |
| color: #1a1a1a; |
| text-shadow: 0 1px 2px rgba(255,255,255,0.5); |
| letter-spacing: -0.02em; |
| } |
| |
| |
| @keyframes popIn { |
| 0% { |
| opacity: 0; |
| transform: scale(0) translateY(50px) rotateX(-45deg); |
| } |
| 60% { |
| opacity: 1; |
| transform: scale(1.1) translateY(-10px) rotateX(5deg); |
| } |
| 80% { |
| transform: scale(0.95) translateY(0) rotateX(-2deg); |
| } |
| 100% { |
| opacity: 1; |
| transform: scale(1) translateY(0) rotateX(0deg); |
| } |
| } |
| |
| @keyframes settle { |
| 0%, 100% { |
| transform: translateY(0) scale(1); |
| } |
| } |
| |
| @keyframes shimmer { |
| 0% { background-position: -200% center; } |
| 100% { background-position: 200% center; } |
| } |
| |
| .animate-pop-1 { animation: popIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } |
| .animate-pop-2 { animation: popIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s forwards; } |
| .animate-pop-3 { animation: popIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s forwards; } |
| .animate-pop-4 { animation: popIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.9s forwards; } |
| .animate-pop-5 { animation: popIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1.2s forwards; } |
| .animate-pop-6 { animation: popIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1.5s forwards; } |
| .animate-pop-7 { animation: popIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1.8s forwards; } |
| .animate-pop-8 { animation: popIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 2.1s forwards; } |
| .animate-pop-9 { animation: popIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 2.4s forwards; } |
| .animate-pop-10 { animation: popIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 2.7s forwards; } |
| .animate-pop-11 { animation: popIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 3.0s forwards; } |
| .animate-pop-12 { animation: popIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 3.3s forwards; } |
| .animate-pop-13 { animation: popIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 3.6s forwards; } |
| .animate-pop-14 { animation: popIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 3.9s forwards; } |
| .animate-pop-15 { animation: popIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 4.2s forwards; } |
| .animate-pop-16 { animation: popIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 4.5s forwards; } |
| .animate-pop-17 { animation: popIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 4.8s forwards; } |
| .animate-pop-18 { animation: popIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 5.1s forwards; } |
| |
| .stack-offset-1 { transform: translateY(-20px) scale(0.98); } |
| .stack-offset-2 { transform: translateY(-40px) scale(0.96); } |
| .stack-offset-3 { transform: translateY(-60px) scale(0.94); } |
| .stack-offset-4 { transform: translateY(-80px) scale(0.92); } |
| .stack-offset-5 { transform: translateY(-100px) scale(0.90); } |
| .stack-offset-6 { transform: translateY(-120px) scale(0.88); } |
| .stack-offset-7 { transform: translateY(-140px) scale(0.86); } |
| .stack-offset-8 { transform: translateY(-160px) scale(0.84); } |
| .stack-offset-9 { transform: translateY(-180px) scale(0.82); } |
| .stack-offset-10 { transform: translateY(-200px) scale(0.80); } |
| .stack-offset-11 { transform: translateY(-220px) scale(0.78); } |
| .stack-offset-12 { transform: translateY(-240px) scale(0.76); } |
| .stack-offset-13 { transform: translateY(-260px) scale(0.74); } |
| .stack-offset-14 { transform: translateY(-280px) scale(0.72); } |
| .stack-offset-15 { transform: translateY(-300px) scale(0.70); } |
| .stack-offset-16 { transform: translateY(-320px) scale(0.68); } |
| .stack-offset-17 { transform: translateY(-340px) scale(0.66); } |
| |
| |
| .particle { |
| position: absolute; |
| pointer-events: none; |
| border-radius: 50%; |
| } |
| |
| .gold-spark { |
| width: 4px; |
| height: 4px; |
| background: #ffd700; |
| box-shadow: 0 0 10px #ffd700, 0 0 20px #ffed4e; |
| } |
| |
| .shimmer-dust { |
| width: 2px; |
| height: 2px; |
| background: rgba(255, 237, 78, 0.8); |
| box-shadow: 0 0 6px rgba(255, 215, 0, 0.8); |
| } |
| |
| .coin-glint { |
| width: 8px; |
| height: 8px; |
| background: radial-gradient(circle, #fff 0%, #ffd700 50%, transparent 70%); |
| border-radius: 50%; |
| } |
| |
| @keyframes floatUp { |
| 0% { |
| opacity: 1; |
| transform: translateY(0) scale(1) rotate(0deg); |
| } |
| 100% { |
| opacity: 0; |
| transform: translateY(-150px) scale(0.5) rotate(360deg); |
| } |
| } |
| |
| @keyframes burst { |
| 0% { |
| opacity: 1; |
| transform: translate(0, 0) scale(1); |
| } |
| 100% { |
| opacity: 0; |
| transform: translate(var(--tx), var(--ty)) scale(0); |
| } |
| } |
| |
| @keyframes streak { |
| 0% { |
| opacity: 0; |
| transform: translateX(-100px) scaleX(0); |
| } |
| 50% { |
| opacity: 1; |
| transform: translateX(0) scaleX(1); |
| } |
| 100% { |
| opacity: 0; |
| transform: translateX(100px) scaleX(0); |
| } |
| } |
| |
| .light-streak { |
| position: absolute; |
| height: 2px; |
| width: 100px; |
| background: linear-gradient(90deg, transparent, #ffd700, transparent); |
| opacity: 0; |
| } |
| |
| |
| @keyframes glowPulse { |
| 0%, 100% { box-shadow: 0 20px 60px rgba(255, 215, 0, 0.4), 0 0 0 4px rgba(255, 215, 0, 0.3); } |
| 50% { box-shadow: 0 25px 70px rgba(255, 215, 0, 0.6), 0 0 0 4px rgba(255, 215, 0, 0.5); } |
| } |
| |
| .glow-active { |
| animation: glowPulse 2s ease-in-out infinite; |
| } |
| |
| |
| .reset { |
| animation: none !important; |
| opacity: 0; |
| transform: scale(0) translateY(50px) rotateX(-45deg); |
| } |
| </style> |
| </head> |
| <body class="h-screen w-screen flex items-center justify-center relative"> |
|
|
| |
| <div class="slot-background"> |
| <div class="reels-container"> |
| |
| <div class="reel"> |
| <span class="slot-symbol text-red-500">7️⃣</span> |
| <span class="slot-symbol text-yellow-400">💎</span> |
| <span class="slot-symbol text-red-600">🍒</span> |
| </div> |
| <div class="reel"> |
| <span class="slot-symbol text-purple-400">💜</span> |
| <span class="slot-symbol text-yellow-500">⭐</span> |
| <span class="slot-symbol text-red-500">7️⃣</span> |
| </div> |
| <div class="reel"> |
| <span class="slot-symbol text-yellow-400">💎</span> |
| <span class="slot-symbol text-red-600">🍒</span> |
| <span class="slot-symbol text-purple-400">💜</span> |
| </div> |
| <div class="reel"> |
| <span class="slot-symbol text-red-500">7️⃣</span> |
| <span class="slot-symbol text-yellow-400">💎</span> |
| <span class="slot-symbol text-yellow-500">⭐</span> |
| </div> |
| <div class="reel"> |
| <span class="slot-symbol text-red-600">🍒</span> |
| <span class="slot-symbol text-purple-400">💜</span> |
| <span class="slot-symbol text-red-500">7️⃣</span> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="vignette"></div> |
|
|
| |
| <div id="particle-container" class="absolute inset-0 pointer-events-none overflow-hidden"></div> |
|
|
| |
| <div class="relative z-10 flex flex-col items-center justify-center" style="perspective: 1000px;"> |
| |
| |
| <div id="card1" class="popup-card" style="z-index: 1;"> |
| <span class="popup-text">Win $3.75</span> |
| </div> |
|
|
| |
| <div id="card2" class="popup-card" style="z-index: 2;"> |
| <span class="popup-text">Win $0.50</span> |
| </div> |
|
|
| |
| <div id="card3" class="popup-card" style="z-index: 3;"> |
| <span class="popup-text">Win $5.50</span> |
| </div> |
|
|
| |
| <div id="card4" class="popup-card" style="z-index: 4;"> |
| <span class="popup-text">Win $0.10</span> |
| </div> |
|
|
| |
| <div id="card5" class="popup-card" style="z-index: 5;"> |
| <span class="popup-text">Win $1.15</span> |
| </div> |
|
|
| |
| <div id="card6" class="popup-card" style="z-index: 6;"> |
| <span class="popup-text">Win $6.25</span> |
| </div> |
|
|
| |
| <div id="card7" class="popup-card" style="z-index: 7;"> |
| <span class="popup-text">Win $0.50</span> |
| </div> |
|
|
| |
| <div id="card8" class="popup-card" style="z-index: 8;"> |
| <span class="popup-text">Win $2.25</span> |
| </div> |
|
|
| |
| <div id="card9" class="popup-card" style="z-index: 9;"> |
| <span class="popup-text">Win $0.75</span> |
| </div> |
|
|
| |
| <div id="card10" class="popup-card" style="z-index: 10;"> |
| <span class="popup-text">Win $3.75</span> |
| </div> |
|
|
| |
| <div id="card11" class="popup-card" style="z-index: 11;"> |
| <span class="popup-text">Win $0.50</span> |
| </div> |
|
|
| |
| <div id="card12" class="popup-card" style="z-index: 12;"> |
| <span class="popup-text">Win $5.50</span> |
| </div> |
|
|
| |
| <div id="card13" class="popup-card" style="z-index: 13;"> |
| <span class="popup-text">Win $0.10</span> |
| </div> |
|
|
| |
| <div id="card14" class="popup-card" style="z-index: 14;"> |
| <span class="popup-text">Win $1.15</span> |
| </div> |
|
|
| |
| <div id="card15" class="popup-card" style="z-index: 15;"> |
| <span class="popup-text">Win $6.25</span> |
| </div> |
|
|
| |
| <div id="card16" class="popup-card" style="z-index: 16;"> |
| <span class="popup-text">Win $0.50</span> |
| </div> |
|
|
| |
| <div id="card17" class="popup-card" style="z-index: 17;"> |
| <span class="popup-text">Win $2.25</span> |
| </div> |
|
|
| |
| <div id="card18" class="popup-card" style="z-index: 18;"> |
| <span class="popup-text">Win $0.75</span> |
| </div> |
|
|
| </div> |
|
|
| <script> |
| |
| function createParticle(x, y, type) { |
| const particle = document.createElement('div'); |
| particle.className = `particle ${type}`; |
| particle.style.left = x + 'px'; |
| particle.style.top = y + 'px'; |
| |
| const container = document.getElementById('particle-container'); |
| container.appendChild(particle); |
| |
| |
| const duration = 1 + Math.random() * 1.5; |
| const delay = Math.random() * 0.2; |
| |
| if (type === 'gold-spark' || type === 'shimmer-dust') { |
| particle.style.animation = `floatUp ${duration}s ease-out ${delay}s forwards`; |
| } else if (type === 'coin-glint') { |
| const angle = Math.random() * Math.PI * 2; |
| const distance = 50 + Math.random() * 100; |
| const tx = Math.cos(angle) * distance; |
| const ty = Math.sin(angle) * distance - 50; |
| particle.style.setProperty('--tx', tx + 'px'); |
| particle.style.setProperty('--ty', ty + 'px'); |
| particle.style.animation = `burst ${duration}s ease-out ${delay}s forwards`; |
| } |
| |
| |
| setTimeout(() => particle.remove(), (duration + delay) * 1000); |
| } |
| |
| function createLightStreak(x, y) { |
| const streak = document.createElement('div'); |
| streak.className = 'light-streak'; |
| streak.style.left = (x - 50) + 'px'; |
| streak.style.top = y + 'px'; |
| streak.style.animation = 'streak 0.8s ease-out forwards'; |
| |
| const container = document.getElementById('particle-container'); |
| container.appendChild(streak); |
| |
| setTimeout(() => streak.remove(), 800); |
| } |
| |
| function emitParticles(x, y, intensity = 'medium') { |
| const counts = { |
| low: { sparks: 8, dust: 15, coins: 5 }, |
| medium: { sparks: 15, dust: 25, coins: 10 }, |
| high: { sparks: 25, dust: 40, coins: 15 } |
| }; |
| |
| const count = counts[intensity] || counts.medium; |
| |
| |
| for (let i = 0; i < count.sparks; i++) { |
| setTimeout(() => { |
| const offsetX = (Math.random() - 0.5) * 200; |
| const offsetY = (Math.random() - 0.5) * 100; |
| createParticle(x + offsetX, y + offsetY, 'gold-spark'); |
| }, i * 30); |
| } |
| |
| |
| for (let i = 0; i < count.dust; i++) { |
| setTimeout(() => { |
| const offsetX = (Math.random() - 0.5) * 300; |
| const offsetY = (Math.random() - 0.5) * 150; |
| createParticle(x + offsetX, y + offsetY, 'shimmer-dust'); |
| }, i * 20); |
| } |
| |
| |
| for (let i = 0; i < count.coins; i++) { |
| setTimeout(() => { |
| createParticle(x, y, 'coin-glint'); |
| }, i * 50); |
| } |
| |
| |
| for (let i = 0; i < 3; i++) { |
| setTimeout(() => { |
| const offsetY = (Math.random() - 0.5) * 60; |
| createLightStreak(x, y + offsetY); |
| }, i * 100); |
| } |
| } |
| |
| |
| function runAnimation() { |
| const cards = [ |
| document.getElementById('card1'), |
| document.getElementById('card2'), |
| document.getElementById('card3'), |
| document.getElementById('card4'), |
| document.getElementById('card5'), |
| document.getElementById('card6'), |
| document.getElementById('card7'), |
| document.getElementById('card8'), |
| document.getElementById('card9'), |
| document.getElementById('card10'), |
| document.getElementById('card11'), |
| document.getElementById('card12'), |
| document.getElementById('card13'), |
| document.getElementById('card14'), |
| document.getElementById('card15'), |
| document.getElementById('card16'), |
| document.getElementById('card17'), |
| document.getElementById('card18') |
| ]; |
| |
| const centerX = window.innerWidth / 2; |
| const centerY = window.innerHeight / 2; |
| |
| |
| cards.forEach(card => { |
| card.className = 'popup-card reset'; |
| card.classList.remove('glow-active'); |
| }); |
| |
| |
| void cards[0].offsetWidth; |
| |
| |
| const stackOffsets = [ |
| 'translateY(0) scale(1)', |
| 'translateY(-20px) scale(0.98)', |
| 'translateY(-40px) scale(0.96)', |
| 'translateY(-60px) scale(0.94)', |
| 'translateY(-80px) scale(0.92)', |
| 'translateY(-100px) scale(0.90)', |
| 'translateY(-120px) scale(0.88)', |
| 'translateY(-140px) scale(0.86)', |
| 'translateY(-160px) scale(0.84)', |
| 'translateY(-180px) scale(0.82)', |
| 'translateY(-200px) scale(0.80)', |
| 'translateY(-220px) scale(0.78)', |
| 'translateY(-240px) scale(0.76)', |
| 'translateY(-260px) scale(0.74)', |
| 'translateY(-280px) scale(0.72)', |
| 'translateY(-300px) scale(0.70)', |
| 'translateY(-320px) scale(0.68)', |
| 'translateY(-340px) scale(0.66)' |
| ]; |
| |
| |
| setTimeout(() => { |
| cards[0].classList.remove('reset'); |
| cards[0].classList.add('animate-pop-1'); |
| if(cards[0].style) cards[0].style.transform = stackOffsets[0]; |
| emitParticles(centerX, centerY + 40, 'high'); |
| }, 100); |
| |
| |
| for (let i = 1; i < 18; i++) { |
| setTimeout(() => { |
| cards[i].classList.remove('reset'); |
| cards[i].classList.add(`animate-pop-${i + 1}`); |
| cards[i].style.transform = stackOffsets[i]; |
| |
| |
| const intensity = (i === 3 || i === 5 || i === 8 || i === 12 || i === 14 || i === 17) ? 'high' : 'medium'; |
| emitParticles(centerX, centerY - (i * 20), intensity); |
| }, 100 + (i * 300)); |
| } |
| |
| |
| setTimeout(() => { |
| cards.forEach(card => card.classList.add('glow-active')); |
| }, 100 + (17 * 300) + 600); |
| |
| |
| setTimeout(() => { |
| cards.forEach(card => { |
| card.classList.remove('glow-active'); |
| card.style.opacity = '0'; |
| card.style.transition = 'opacity 0.5s ease-out'; |
| }); |
| |
| setTimeout(() => { |
| cards.forEach(card => { |
| card.style.transition = ''; |
| card.style.transform = ''; |
| }); |
| runAnimation(); |
| }, 500); |
| }, 10800); |
| } |
| |
| |
| function createAmbientParticles() { |
| const centerX = window.innerWidth / 2; |
| const centerY = window.innerHeight / 2; |
| |
| setInterval(() => { |
| if (Math.random() > 0.7) { |
| const x = centerX + (Math.random() - 0.5) * 400; |
| const y = centerY + (Math.random() - 0.5) * 300; |
| createParticle(x, y, 'shimmer-dust'); |
| } |
| }, 200); |
| } |
| |
| |
| window.addEventListener('load', () => { |
| runAnimation(); |
| createAmbientParticles(); |
| }); |
| |
| |
| window.addEventListener('resize', () => { |
| |
| }); |
| </script> |
| <script src="https://deepsite.hf.co/deepsite-badge.js"></script> |
| </body> |
| </html> |
