WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Animation de notification de blob CSS
514
ByBy.inc
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
16 May 2025
Un code de DEME
28 July 2025
code bloom
26 December 2024
Un code par pan4o
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) */