Frammento di animazione di memoria CSS

Apri nell'Editor Video Pubblica il Tuo Codice

Consigliato

16 April 2025

Frammento di codice del menu HTML per hamburger

20 April 2025

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

Frammento di animazione di memoria CSS

Consigliato

Un codice di hamzanramzan034

Frammento di codice del menu HTML per hamburger

Un codice di Metehan

HTML

CSS

JS

Consigliato

Un codice di hamzanramzan034

Frammento di codice del menu HTML per hamburger

Un codice di Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS