Animación de notificación de blobs CSS

1,017 byby.createsite

Abrir en el editor Publica tu código

Recomendado

31 May 2026

Código HTML5 del juego Escape Road

18 December 2025

Juego de Mario HTML5 jugable en línea

10 August 2024

Filtro de galería

HTML

CSS

*{
  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; }
}