Trecho de animação de memória CSS

Abrir no Editor Video Publique Seu Código

Recomendado

7 November 2024

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

Trecho de animação de memória CSS

Recomendado

Layout de colunas

Entrada de senha Light

Terminal de hack

HTML

CSS

JS

Recomendado

Layout de colunas

Entrada de senha Light

Terminal de hack

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS