Fragmento de animación de memoria CSS

1,158 byby.createsite

Abrir en el editor Publica tu código

Recomendado

26 June 2025

Sitio de comercio electrónico HTML, Tailwind CSS, Compras

21 October 2024

Efectos del menú desplegable

22 September 2025

Fragmento de animación HTML de Neuron

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