Animación CSS: Efecto de fragmento de memoria fantasma

726 byby.createsite

Abrir en el editor Publica tu código

Animación CSS: Efecto de fragmento de memoria fantasma

Recomendado

9 September 2024

Generador de contraseñas

19 October 2025

Transformación de formas de partículas con controles en Three.js

28 August 2025

Plantilla HTML para aplicación de transmisión de música con Tailwind

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

Recomendado

Generador de contraseñas

Transformación de formas de partículas con controles en Three.js

Plantilla HTML para aplicación de transmisión de música con Tailwind

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS