Frammento di animazione di memoria CSS

616 byby.createsite

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

23 March 2025

Portafoglio di denaro

26 September 2025

Frammento di codice di animazione CSS Dopamine Drip

12 July 2025

Contatore di clic della barra spaziatrice - JavaScript HTML

HTML

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background-color: #181818; /* Fundo preto para destacar o brilho da nostalgia */
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
}

.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;
}
.memory { /* Fragmentação e reconfiguração da memória */
  position: absolute;
  width: 80px;
  height: 80px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), transparent); /* gradiente de névoa */
  clip-path: polygon(50% 0%, 100% 25%, 75% 100%, 0% 100%, 25% 75%);  
  animation: fadeGlitch 2s linear infinite;
}
.memory::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 80px;
    height: 80px;
    background:linear-gradient(to bottom, rgba(255, 255, 255, 0.8), transparent);
    clip-path: polygon(50% 0%, 100% 25%, 75% 100%, 0% 100%, 25% 75%);
    animation: fadeGlitch 2s linear infinite;
}  
@keyframes fadeGlitch { /* A animação de fade cria o efeito de glitch */ 
  0% {
    opacity: 1;
    transform: rotate(0deg);
  }
  50% {
    opacity: 0.2;
    transform: rotate(180deg);
  }
  100%{
    opacity: 1;
    transform: rotate(0deg);
  }
}

Consigliato

Portafoglio di denaro

Frammento di codice di animazione CSS Dopamine Drip

Contatore di clic della barra spaziatrice - JavaScript HTML

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS