body { width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; background: linear-gradient(135deg, #1a1a2e 0%, #0f0f1e 100%); overflow: hidden; }
.candle-container { position: relative; display: flex; flex-direction: column; align-items: center; transform: scale(1.5); }
/* Flame */ .flame { position: relative; width: 60px; height: 120px; margin-bottom: -10px; z-index: 10; }
.flame-core { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 50px; height: 100px; background: linear-gradient(to top, rgba(255, 200, 0, 1) 0%, rgba(255, 150, 0, 0.95) 30%, rgba(255, 100, 0, 0.8) 60%, rgba(255, 50, 0, 0.4) 100% ); border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; filter: blur(2px); animation: flameMove 2s ease-in-out infinite, flameFlicker 0.3s ease-in-out infinite alternate; box-shadow: 0 0 40px rgba(255, 150, 0, 0.8), 0 0 80px rgba(255, 100, 0, 0.4); }
.flame-inner { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); width: 30px; height: 70px; background: linear-gradient(to top, rgba(255, 255, 200, 1) 0%, rgba(255, 220, 100, 0.9) 50%, rgba(255, 150, 0, 0.5) 100% ); border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; filter: blur(1px); animation: flameMove 2s ease-in-out infinite 0.1s, flameInnerFlicker 0.2s ease-in-out infinite alternate; }
.flame-center { position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%); width: 15px; height: 40px; background: linear-gradient(to top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 200, 0.9) 70%, rgba(255, 200, 100, 0.4) 100% ); border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; animation: flameMove 2s ease-in-out infinite 0.2s, flameCenterFlicker 0.15s ease-in-out infinite alternate; }
/* Sparks */ .spark { position: absolute; width: 3px; height: 3px; background: #ffeb3b; border-radius: 50%; box-shadow: 0 0 6px #ff9800, 0 0 12px #ff5722; opacity: 0; }
.spark:nth-child(1) { bottom: 60px; left: 20px; animation: spark1 3s ease-in-out infinite; }
.spark:nth-child(2) { bottom: 70px; left: 35px; animation: spark2 2.5s ease-in-out infinite 0.5s; }
.spark:nth-child(3) { bottom: 50px; left: 15px; animation: spark3 3.5s ease-in-out infinite 1s; }
.spark:nth-child(4) { bottom: 80px; left: 40px; animation: spark4 2.8s ease-in-out infinite 1.5s; }
.spark:nth-child(5) { bottom: 55px; left: 25px; animation: spark5 3.2s ease-in-out infinite 2s; }
/* Wick */ .wick { position: relative; width: 4px; height: 15px; background: linear-gradient(to top, #3a3a3a 0%, #1a1a1a 100%); border-radius: 2px; z-index: 5; margin-bottom: -5px; }
/* Candle body */ .candle { position: relative; width: 120px; height: 280px; background: linear-gradient(to bottom, #ffffff 0%, #f5f5f5 50%, #e8e8e8 100% ); border-radius: 0 0 10px 10px; box-shadow: inset -10px 0 20px rgba(0, 0, 0, 0.1), inset 10px 0 20px rgba(255, 255, 255, 0.3), 0 10px 30px rgba(0, 0, 0, 0.3); overflow: hidden; }
.candle::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 8px; background: linear-gradient(to bottom, #fafafa 0%, #e8e8e8 100% ); border-radius: 50%; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 1px 2px rgba(255, 255, 255, 0.5); }
.candle::after { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 8px; height: 8px; background: radial-gradient(circle, #2a2a2a 0%, #1a1a1a 100%); border-radius: 50%; z-index: 2; }
/* Wax drip effect */ .wax-drip { position: absolute; width: 20px; height: 40px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 0%, rgba(240, 240, 240, 0.8) 100% ); border-radius: 0 0 50% 50%; opacity: 0.7; }
.wax-drip:nth-child(1) { top: 30px; left: 15px; animation: dripFlow 8s ease-in-out infinite; }
.wax-drip:nth-child(2) { top: 50px; right: 20px; height: 35px; animation: dripFlow 10s ease-in-out infinite 2s; }
.wax-drip:nth-child(3) { top: 80px; left: 25px; height: 30px; animation: dripFlow 12s ease-in-out infinite 4s; }
/* Glow effect */ .glow { position: absolute; top: -50px; left: 50%; transform: translateX(-50%); width: 200px; height: 200px; background: radial-gradient(circle, rgba(255, 150, 0, 0.3) 0%, rgba(255, 100, 0, 0.1) 50%, transparent 100% ); border-radius: 50%; animation: glowPulse 2s ease-in-out infinite; pointer-events: none; }
/* Animations */ @keyframes flameMove { 0%, 100% { transform: translateX(-50%) translateY(0) scaleY(1); } 25% { transform: translateX(-48%) translateY(-5px) scaleY(1.05); } 50% { transform: translateX(-52%) translateY(0) scaleY(0.95); } 75% { transform: translateX(-50%) translateY(-3px) scaleY(1.02); } }
@keyframes flameFlicker { 0% { opacity: 1; filter: blur(2px); } 100% { opacity: 0.95; filter: blur(2.5px); } }
@keyframes flameInnerFlicker { 0% { opacity: 1; transform: translateX(-50%) scaleY(1); } 100% { opacity: 0.9; transform: translateX(-50%) scaleY(0.98); } }
@keyframes flameCenterFlicker { 0% { opacity: 1; transform: translateX(-50%) scaleY(1); } 100% { opacity: 0.85; transform: translateX(-50%) scaleY(1.05); } }
@keyframes spark1 { 0% { opacity: 0; transform: translate(0, 0) scale(0); } 10% { opacity: 1; transform: translate(2px, -5px) scale(1); } 40% { opacity: 0.8; transform: translate(-8px, -25px) scale(0.8); } 100% { opacity: 0; transform: translate(-15px, -50px) scale(0); } }
@keyframes spark2 { 0% { opacity: 0; transform: translate(0, 0) scale(0); } 15% { opacity: 1; transform: translate(-3px, -8px) scale(1); } 45% { opacity: 0.7; transform: translate(10px, -30px) scale(0.7); } 100% { opacity: 0; transform: translate(18px, -60px) scale(0); } }
@keyframes spark3 { 0% { opacity: 0; transform: translate(0, 0) scale(0); } 12% { opacity: 1; transform: translate(1px, -6px) scale(1); } 50% { opacity: 0.6; transform: translate(-5px, -35px) scale(0.6); } 100% { opacity: 0; transform: translate(-10px, -55px) scale(0); } }
@keyframes spark4 { 0% { opacity: 0; transform: translate(0, 0) scale(0); } 8% { opacity: 1; transform: translate(-2px, -4px) scale(1); } 35% { opacity: 0.9; transform: translate(6px, -20px) scale(0.8); } 100% { opacity: 0; transform: translate(12px, -45px) scale(0); } }
@keyframes spark5 { 0% { opacity: 0; transform: translate(0, 0) scale(0); } 20% { opacity: 1; transform: translate(3px, -10px) scale(1); } 55% { opacity: 0.5; transform: translate(-7px, -32px) scale(0.5); } 100% { opacity: 0; transform: translate(-12px, -58px) scale(0); } }
@keyframes glowPulse { 0%, 100% { opacity: 0.6; transform: translateX(-50%) scale(1); } 50% { opacity: 0.8; transform: translateX(-50%) scale(1.1); } }
@keyframes dripFlow { 0%, 100% { transform: translateY(0); opacity: 0.7; } 50% { transform: translateY(3px); opacity: 0.5; } }
/* Responsive adjustments */ @media (max-width: 768px) { .candle-container { transform: scale(1); } }
@media (max-width: 480px) { .candle-container { transform: scale(0.7); } } </style>
</head> <body> <div class="candle-container"> <div class="glow"></div> <div class="flame"> <div class="spark"></div> <div class="spark"></div> <div class="spark"></div> <div class="spark"></div> <div class="spark"></div> <div class="flame-core"></div> <div class="flame-inner"></div> <div class="flame-center"></div> </div> <div class="wick"></div> <div class="candle"> <div class="wax-drip"></div> <div class="wax-drip"></div> <div class="wax-drip"></div> </div> </div> </body> </html>*