Animation photo CSS Nostalgia Glitch

1,087 byby.createsite

Ouvrir dans l'éditeur Publiez votre code

Recommandé

23 November 2025

Animation de carte de crédit réalisée avec Paystack

27 February 2024

Bouton HTML CSS

27 January 2026

Jeu js13k : Evil Glitch - Jeu HTML5 Canvas

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