Animación fotográfica con fallos de nostalgia CSS

326 ByBy.inc

Abrir en el editor Publica tu código

Animación fotográfica con fallos de nostalgia CSS

Recomendado

10 August 2025

Estructura de animación de bloques CSS

13 August 2023

Formulario de inicio de sesión con redes sociales

10 April 2025

Un código de cleanbug411

HTML

<body>

<span class=" glitch">
        <span style="
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 24px;
            color: #f8f8f2;
            text-align: center;
            letter-spacing: 2px;
            animation: flicker 1s infinite alternate-reverse;
            ">
            Sábado: Glitch da Nostalgia</span>
    </span>
</div>

@keyframes sat_slide {
            0% {
                opacity: 0;
            }
            50% {
                opacity: 1;
            }
            100% {
                opacity: 0;
            }
        }

@keyframes flicker {
            0% {
                opacity :1;
            }
            50% {
                opacity: 0;
                filter : blur(30px)

}
            100% {
                opacity: 1;
            }
        }
        .memory{
            animation-delay: 0s;
        }
    </style>
</body>

CSS

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

body {
            background-color: #191F24;
            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%;
            width: 100%;
            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;
        }

Recomendado

Estructura de animación de bloques CSS

Formulario de inicio de sesión con redes sociales

Un código de cleanbug411

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS