Tip Cyberpunk Glitch Animated Username Styling

[Eggy]

View attachment 21602.mp4​

Give your XenForo user groups a futuristic Cyberpunk Glitch effect using custom CSS added to extra.less and the group's Username CSS settings.

Add the following to the bottom of your extra.less

@keyframes ctGlitch
{
    0%, 100%
    {
        text-shadow: -2px 0 #ff0055,
                      2px 0 #00ffff;
        transform: translateX(0);
    }

    20%
    {
        text-shadow: 2px 0 #ff0055,
                    -2px 0 #00ffff;
        transform: translateX(-1px);
    }

    40%
    {
        text-shadow: -3px 0 #ff0055,
                      3px 0 #00ffff;
        transform: translateX(1px);
    }

    60%
    {
        text-shadow: 3px 0 #ff0055,
                    -3px 0 #00ffff;
        transform: translateX(-1px);
    }

    80%
    {
        text-shadow: -1px 0 #ff0055,
                      1px 0 #00ffff;
        transform: translateX(1px);
    }
}

Then simply add the following CSS into the desired user group

color: #ffffff;
font-weight: 800;
display: inline-block;
text-shadow: -2px 0 #ff0055, 2px 0 #00ffff;
animation: ctGlitch 1.5s steps(1, end) infinite;

So it looks like this