CSS Memory Animation Snippet

Open In Editor Publish Your Code

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

CSS Memory Animation Snippet

Recommended

CSS Grid Animation Example

CSS Toggle Switch HTML Code

CSS Loading Animation with Background Image

HTML

CSS

JS

Recommended

CSS Grid Animation Example

CSS Toggle Switch HTML Code

CSS Loading Animation with Background Image

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS