Webleb - fragmentos de código - Animación CSS: Efecto de fragmento de memoria fantasma

HTML

CSS

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            background-color: #1a1d2d;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            overflow: hidden;
        }

.codigo {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            background: #272822;
            color: #F8F8F2;
            font-family: 'Consolas', 'Monaco', monospace;
            font-size: 18px;
            padding: 20px;
            border-radius: 8px;
            white-space: pre-line;
            text-align: left;
            line-height: 1.6;
            max-height: 50%;
            max-width: 90%;
            width: 100%;
            overflow-y: auto;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        }

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

*{
             background: linear-gradient(to bottom, #2b204b, #1a1d2d);
          }

.codigo {
             background: #1a1d2d;
          }

.pixelated-memory {
            position: absolute;
            width: 150px;
            height: 150px;
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3e%3crect x='0' y='0' width='100' height='100' fill='%23A6E22E'/%3e%3c/svg%3e");
             background-position: center center; 
            background-size: contain;
            background-repeat: no-repeat;
            animation: pixelate 3s infinite linear alternate;
            filter: blur(10px);
            opacity: 0.8;
            transform: translateX(80px) translateY(10px) scale(0.7) rotate(10deg);
            z-index: 1;
        }

@keyframes pixelate {
            0% {
                filter: blur(10px);
            }
            50% {
                filter: blur(20px);
            }
            100% {
                filter: blur(10px);
            }
        }

.memory-fragment {
            position: relative;
            width: 300px;
            height: 300px;
            background-color: #252a3f;
            border-radius: 15px;
            padding: 20px;
            mix-blend-mode: luminosity; 
            animation: ripple 3s infinite alternate; 
            overflow: hidden;
            z-index: 0; /* Ensure the memories are behind the pixels */
        }

/* This creates a ripple effect on the memories */
        @keyframes ripple {
            0% {
                transform: scale(1);  
            }
            25% {
                transform: scale(1.1); 
            }
            50% {
                transform: scale(1.15); 
            }
            75% {
                transform: scale(1.1); 
            }
            100% {
                transform: scale(1);
            }
        }

.ghost {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) rotate(180deg);
            width: 100%;
            height: 100%;
            mix-blend-mode: screen; 
            opacity: 0.8; 
        }

Animación CSS: Efecto de fragmento de memoria fantasma

Recomendado

Tarjeta de zapatos

Botón de autodestrucción

Fondo de puntos animados

HTML

CSS

JS

Recomendado

Tarjeta de zapatos

Botón de autodestrucción

Fondo de puntos animados

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS