WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
CSS Memory Animation Snippet
617
byby.createsite
Open In Editor
Publish Your Code
Recommended
15 September 2025
CSS Grid Animation Example
24 July 2025
CSS Toggle Switch HTML Code
26 September 2025
CSS Loading Animation with Background Image
HTML
Copy
CSS
Copy
* { 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); } }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */