Animación de notificación de blobs CSS

30 ByBy.inc

Abrir en el editor Publica tu código

Recomendado

30 May 2025

Codificación manual de la página de inicio de sesión de Facebook

26 July 2025

Editor HTML en línea | CodeCanvas: herramienta gratuita para desarrollo web

28 February 2025

Formulario de registro/inicio de sesión de animación

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

Recomendado

Codificación manual de la página de inicio de sesión de Facebook

Editor HTML en línea | CodeCanvas: herramienta gratuita para desarrollo web

Formulario de registro/inicio de sesión de animación

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS