Animation photo CSS Nostalgia Glitch

Ouvrir dans l'éditeur Publiez votre code

Recommandé

6 November 2024

Curseur d'images pour Blogspot CSS3

29 August 2024

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

Animation photo CSS Nostalgia Glitch

Recommandé

Animation de texte

Curseur d'images pour Blogspot CSS3

Photo Déchirure

HTML

CSS

JS

Recommandé

Animation de texte

Curseur d'images pour Blogspot CSS3

Photo Déchirure

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS