CSS ब्लॉब अधिसूचना एनीमेशन

513 ByBy.inc

संपादक में खोलें अपना कोड प्रकाशित करें

अनुशंसित

12 December 2024

ब्लॉगस्पॉट CSS3 के लिए छवि स्लाइडर

19 November 2025

CSS और चार्ट के साथ HTML एडमिन डैशबोर्ड टेम्पलेट

11 October 2025

CSS लोडिंग एनिमेशन: सर्कल लोडर

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

अनुशंसित

ब्लॉगस्पॉट CSS3 के लिए छवि स्लाइडर

CSS और चार्ट के साथ HTML एडमिन डैशबोर्ड टेम्पलेट

CSS लोडिंग एनिमेशन: सर्कल लोडर

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS