Grokking CSS Design Patterns to Ace Interviews/

...

/

Solution: Glitch Text Animation

Solution: Glitch Text Animation

Let’s create a glitchy text effect by duplicating and animating colored slices of text using pseudo-elements and CSS keyframes.

We'll cover the following...

Problem description

Given an HTML page containing a single <h1 class="glitch">Glitch Text</h1> element, write CSS to:

  • Position .glitch as relative and set a fallback font style.

  • Use ::before and ::after pseudo-elements to duplicate the text content (via content: attr(data-text)), absolutely positioned over the original. ...