Magic Gift Box

:root { --dark-bg: #1a1a1a; --purple-primary: #8A2BE2; --purple-secondary: #6a1b9a; --purple-dark: #4a148c; --text-light: #f0f0f0; --gold: #ffd700; --plate: #4a4a4a; } * { box-sizing: border-box; margin: 0; padding: 0; } body { background: var(--dark-bg); display: flex; justify-content: center; align-items: center; min-height: 100vh; font-family: 'Arial', sans-serif; perspective: 1000px; } .container { position: relative; width: 100%; max-width: 400px; padding: 20px; } .gift-cube { position: relative; width: 200px; height: 200px; margin: 0 auto; cursor: pointer; transform-style: preserve-3d; transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); } .cube-front, .cube-top, .cube-side { position: absolute; background: linear-gradient(45deg, var(--purple-primary), var(--purple-secondary)); border: 2px solid var(--purple-dark); } .cube-front { width: 200px; height: 200px; transform: translateZ(20px); } .cube-top { width: 200px; height: 40px; background: var(--purple-dark); transform: rotateX(-90deg) translateZ(-20px) translateY(-20px); } .cube-side { width: 40px; height: 200px; background: var(--purple-primary); left: 200px; transform: rotateY(90deg) translateZ(20px); } .ribbon-wrap { position: absolute; width: 100%; height: 100%; transform-style: preserve-3d; } .ribbon { position: absolute; width: 100%; height: 20px; background: var(--gold); top: 50%; transform: translateY(-50%) rotate(-45deg); opacity: 0.8; box-shadow: 0 2px 4px rgba(0,0,0,0.2); } .bow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; } .bow-loop { width: 30px; height: 50px; background: var(--gold); border-radius: 50%; position: absolute; } .bow-loop.left { transform: rotate(30deg) translateX(-15px); } .bow-loop.right { transform: rotate(-30deg) translateX(15px); } .bow-center { width: 20px; height: 20px; background: var(--gold); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; } .cake-container { position: absolute; width: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); } .cake-container.visible { opacity: 1; } .cake-plate { position: absolute; width: 250px; height: 20px; background: var(--plate); border-radius: 10px; bottom: -30px; left: 50%; transform: translateX(-50%); box-shadow: 0 10px 20px rgba(0,0,0,0.3); } .cake { position: relative; width: 220px; height: 140px; margin: 0 auto; } .layer { position: absolute; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.3); } .layer.bottom { width: 100%; height: 60%; bottom: 0; background: linear-gradient(45deg, #e67e22, #d35400); } .layer.middle { width: 90%; height: 50%; bottom: 40%; left: 5%; background: linear-gradient(45deg, #f1c40f, #f39c12); } .layer.top { width: 80%; height: 40%; bottom: 70%; left: 10%; background: linear-gradient(45deg, #f4d03f, #f1c40f); } .icing { position: absolute; width: 110%; height: 25%; background: #f5b7b1; border-radius: 50% 50% 0 0; bottom: 95%; left: -5%; box-shadow: 0 -5px 10px rgba(0,0,0,0.1); } .icing::before { content: ''; position: absolute; width: 120%; height: 15px; background: #f5b7b1; bottom: -10px; left: -10%; border-radius: 50%; } .sprinkles { position: absolute; width: 100%; height: 100%; pointer-events: none; } .sprinkle { position: absolute; width: 4px; height: 12px; border-radius: 2px; transform-origin: center; } .candles { position: absolute; width: 100%; height: 80px; bottom: 100%; display: flex; justify-content: center; gap: 30px; } .candle { position: relative; width: 14px; height: 50px; background: linear-gradient(90deg, #fff 0%, #f0f0f0 100%); border-radius: 3px; transition: all 0.3s ease; } .flame { position: absolute; width: 10px; height: 20px; background: linear-gradient(180deg, #ff9a00 0%, #ff2200 100%); border-radius: 50% 50% 35% 35%; bottom: 100%; left: 50%; transform: translateX(-50%); opacity: 0; filter: blur(2px); animation: flameFlicker 0.1s infinite alternate; } .lit .flame { opacity: 1; } .controls { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 15px; margin-top: 100px; } .btn { position: relative; padding: 15px 30px; border: none; border-radius: 30px; font-size: 1.1rem; cursor: pointer; transition: all 0.3s ease; background: linear-gradient(45deg, var(--purple-primary), var(--purple-secondary)); color: var(--text-light); box-shadow: 0 4px 15px rgba(138, 43, 226, 0.4); overflow: hidden; } .btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(138, 43, 226, 0.6); } .icon { margin-left: 8px; filter: drop-shadow(0 0 4px rgba(255,255,255,0.5)); } @keyframes flameFlicker { 0% { transform: translateX(-50%) scale(1) rotate(-2deg); } 100% { transform: translateX(-50%) scale(1.1) rotate(2deg); } } @keyframes sprinkleFall { 0% { transform: translateY(-100px) rotate(0deg); opacity: 0; } 100% { transform: translateY(0) rotate(360deg); opacity: 1; } } function revealCake() { const cube = document.querySelector('.gift-cube'); const cakeContainer = document.querySelector('.cake-container'); cube.style.transform = 'rotateX(60deg) translateZ(-50px)'; cube.style.opacity = '0'; setTimeout(() => { cakeContainer.classList.add('visible'); cakeContainer.classList.remove('hidden'); addSprinkles(); createCakeGlow(); }, 800); } function addSprinkles() { const sprinklesContainer = document.querySelector('.sprinkles'); const colors = ['#FF3366', '#33CC99', '#FF9933', '#9933FF', '#FFCC00']; for (let i = 0; i < 50; i++) { const sprinkle = document.createElement('div'); sprinkle.className = 'sprinkle'; sprinkle.style.left = Math.random() * 100 + '%'; sprinkle.style.top = Math.random() * 100 + '%'; sprinkle.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)]; sprinkle.style.transform = `rotate(${Math.random() * 360}deg)`; sprinkle.style.animation = `sprinkleFall ${0.5 + Math.random() * 1}s ease-out`; sprinklesContainer.appendChild(sprinkle); } } function createCakeGlow() { const cake = document.querySelector('.cake'); const glow = document.createElement('div'); glow.className = 'cake-glow'; cake.appendChild(glow); setTimeout(() => { glow.style.boxShadow = '0 0 40px 20px rgba(255, 215, 0, 0.3)'; setTimeout(() => { glow.style.boxShadow = 'none'; }, 1000); }, 200); } function animateBlow() { const candles = document.querySelectorAll('.candle'); const flames = document.querySelectorAll('.flame'); candles.forEach((candle, index) => { setTimeout(() => { candle.style.transform = 'translateY(-10px) scale(0.9)'; setTimeout(() => { candle.style.transform = 'none'; }, 300); }, index * 80); }); flames.forEach(flame => { flame.style.animation = 'flameOut 0.5s forwards'; }); setTimeout(() => { blowOutCandles(); }, 500); createWindEffect(); } function blowOutCandles() { document.querySelectorAll('.candle').forEach(candle => { candle.classList.remove('lit'); }); } function relightCandles() { document.querySelectorAll('.candle').forEach((candle, index) => { setTimeout(() => { candle.classList.add('lit'); candle.style.transform = 'translateY(-15px)'; setTimeout(() => { candle.style.transform = 'none'; }, 300); }, index * 150); }); } function createWindEffect() { const wind = document.createElement('div'); wind.className = 'wind-effect'; wind.style.background = 'linear-gradient(90deg, rgba(255,255,255,0.3), transparent)'; wind.style.width = '200%'; wind.style.height = '100%'; wind.style.position = 'absolute'; wind.style.left = '-100%'; wind.style.top = '0'; wind.style.animation = 'windBlow 1s linear'; document.body.appendChild(wind); setTimeout(() => { wind.remove(); }, 1000); }