Untitled
unknown
plain_text
16 days ago
2.4 kB
3
Indexable
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Animated Candle</title> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #1a1a1a; margin: 0; } .candle { position: relative; width: 30px; height: 100px; background-color: #ffffff; border-radius: 5px 5px 0 0; box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); } .flame { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); width: 10px; height: 30px; background-color: #ffcc00; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; animation: flicker 2s infinite ease-in-out; } .flame::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 6px; height: 15px; background-color: #ff6600; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; opacity: 0.7; } .sparks { position: absolute; top: -30px; left: 50%; width: 2px; height: 2px; background-color: #ffcc00; border-radius: 50%; animation: spark 1.5s infinite ease-in-out; } .sparks::before, .sparks::after { content: ''; position: absolute; width: 2px; height: 2px; background-color: #ffcc00; border-radius: 50%; animation: spark 1.5s infinite ease-in-out; } .sparks::before { top: -5px; left: -10px; animation-delay: 0.5s; } .sparks::after { top: -10px; left: 5px; animation-delay: 1s; } @keyframes flicker { 0%, 100% { transform: translateX(-50%) scaleY(1); } 50% { transform: translateX(-50%) scaleY(1.1) skewX(2deg); } } @keyframes spark { 0%, 100% { transform: translateY(0) scale(1); opacity: 1; } 50% { transform: translateY(-10px) scale(0.8); opacity: 0.5; } } </style> </head> <body> <div class="candle"> <div class="flame"></div> <div class="sparks"></div> </div> </body> </html>
Editor is loading...
Leave a Comment