Glitch эффект для текста

05 Июля 2021 21:41

Glitch эффект для текста без искаженияна чистом CSS

HTML

<h1 class="glitch">t.me/VmCode</h1>

CSS

body {
    background-color: #121b2b;
}

.glitch {
    /* Выравниваем по центру */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    font-size: 60px;
    color: #fff;
    animation: glitch 0.5s linear infinite;
}

@keyframes glitch {
    0%, 100% {
        text-shadow: -2.5px -2.5px 0 #1f640a, 
                        2.5px 2.5px 0 #f00;
    }
    25% {
        text-shadow: 2.5px 2.5px 0 #1f640a, 
                        -2.5px -2.5px 0 #f00;
    }
    50% {
        text-shadow: 2.5px -2.5px 0 #1f640a, 
                        -2.5px 2.5px 0 #f00;
    }
    75% {
        text-shadow: 2.5px 2.5px 0 #1f640a, 
                        2.5px -2.5px 0 #f00;
    }
}

Результат