CSS एनिमेशन: पल्स के साथ ब्लॉब लोड करना

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

अनुशंसित

24 July 2025

404 त्रुटियाँ HTML CSS फ्रेंच में

HTML

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background-color: #181818;
  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;
  /* Animação principal: 90s city grid, corrompido */
}
/* Animação 1: Linhas de código pixeladas */
.codigo-linha { 
  width: 100%;
  height: 2px;
  background: #FFC0CB; /* Pink pastel */
  position: absolute;
  opacity: 0.5;
  animation: pixelate 2s linear infinite;
}
 .codigo-linha:nth-child(odd) { 
  animation-direction: reverse; 
}

@keyframes pixelate {
  0% { transform: translateX(0) } /* Inicia sem disjunção */
  50% { transform: translateX(5px) } /* Deslocamento para criar a "corrupção" */
  100% { transform: translateX(0) } /* Volta para a posição original */
}

/* Animação 2: Blocos de cores distorcidos */
.blob {
  position: absolute;
  width: 200px; 
  height: 200px;
  background: #66BB6A; /* Verde vibrante */
  border-radius: 50%;
  animation: blurFade 2s ease-in-out infinite;
}

@keyframes blurFade {
  0% { filter: blur(0px); opacity: 1; } /* Inicialmente claro */
  50% { filter: blur(10px); opacity: 0.5; } /* Blur aumenta, opacidade diminui */
  100% { filter: blur(0px); opacity: 1; }  /* Volta ao estado original */
}

/* Animação 3: Luz pulsante */
.light-pulse { 
  position: absolute;
  width: 50px; 
  height: 50px;
  background: linear-gradient(to bottom, #FFE082, #FFA07A); /* Laranja desvanecente */
  border-radius: 50%;
  animation: pulse 1s ease-in-out infinite;
}

@keyframes pulse {
  0% { transform: scale(1); opacity: 1; } /* Inicial: tamanho normal */
  50% { transform: scale(1.2); opacity: 0.5; }  /* Aumenta e diminui opacidade */
  100% { transform: scale(1); opacity: 1; } /* Volta ao tamanho original */
}

CSS एनिमेशन: पल्स के साथ ब्लॉब लोड करना

अनुशंसित

CSS लोडिंग एनीमेशन स्निपेट

CSS लोडिंग एनीमेशन स्निपेट

404 त्रुटियाँ HTML CSS फ्रेंच में

HTML

CSS

JS

अनुशंसित

CSS लोडिंग एनीमेशन स्निपेट

CSS लोडिंग एनीमेशन स्निपेट

404 त्रुटियाँ HTML CSS फ्रेंच में

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS