Animación fotográfica con fallos de nostalgia CSS

1,190 byby.createsite

Abrir en el editor Publica tu código

Animación fotográfica con fallos de nostalgia CSS

Recomendado

14 April 2023

Barra de navegación CSS responsiva

1 April 2026

GN-Math: Juegos desbloqueados, búsqueda, clasificación y juego.

10 July 2023

Modo oscuro con CSS conmutable

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