WEBLEB
होम
संपादक
लॉग इन करें
Pro
हिंदी
English
Français
Español
Português
Deutsch
Italiano
हिंदी
CSS ब्लॉब अधिसूचना एनीमेशन
270
ByBy.inc
संपादक में खोलें
अपना कोड प्रकाशित करें
अनुशंसित
28 March 2025
सीएसएस स्प्राइट-एनीमेशन स्विचर
4 October 2025
CSS लेयर एनीमेशन उदाहरण
17 July 2025
3D घूर्णन लॉगिन साइनअप फ़ॉर्म HTML CSS
HTML
Copy
Nova notificação!
CSS
Copy
*{ margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #121212; display: flex; align-items: center; justify-content: center; height: 100vh; overflow: hidden; } .codigo { position: absolute; top: 0; left: 50%; transform: translateX(-50%); background: #272822; color: #F8F8F2; font-family: 'Consolas', 'Monaco', monospace; font-size: 18px; padding: 20px; border-radius: 8px; white-space: pre-line; text-align: left; line-height: 1.6; max-height: 50%; width: 100%; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .selector { color: #F92672; } .property { color: #66D9EF; } .value-number { color: #AE81FF; } .value-string { color: #E6DB74; } .value-color { color: #A6E22E; } .brace { color: #F8F8F2; } .comment { color: #75715E; } .function { color: #A6E22E; } .animation-container { position: absolute; top: 75%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; width: 100%; height: 50%; overflow: hidden; background:transparent; } .blob { position: relative; width: 100px; height: 100px; background: linear-gradient(to bottom, #12FF00, #FFD700); border-radius: 50%; opacity: 0; animation: pulse 3s linear infinite; } @keyframes pulse { 0% { transform: scale(0.9); /* Diminui ligeiramente no início */ opacity: 0; /* Inicia transparente */ } 50% { transform: scale(1.1); /* Aumenta para o pico maior */ opacity: 1; /* Torna-se completamente opaca no pico */ } 100% { transform: scale(0.9); /* Diminui ligeiramente para o fim */ opacity: 0; /* Volta a ficar transparente */ } } .notification { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(120, 179, 255, 0.8); /* Blur dá sensação de overlay */ backdrop-filter: blur(10px); /* Blur sobre a notificação */ display: flex; align-items: center; justify-content: center; animation: fadeOut 2s forwards; /* Animação de desaparecimento */ } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */