.glitch { position: relative; } @media screen and (min-width: 786px) { .glitch:before, .glitch:after { content: attr(data-text); color:#FFEA00; mix-blend-mode: lighten; position: absolute; top: 0; width: 100%; clip: rect(0, 0, 0, 0); } .glitch:before { left: -1px; text-shadow: 2px 0 rgba(255, 25, 105, 0.7); } .glitch:after { left: 1px; text-shadow: -3px 0 rgba(29, 77, 204, 0.7); } .glitch:hover:before { text-shadow: 5px 0 rgba(255, 25, 105, 0.7); animation: glitch-loop-1 0.9s infinite ease-in-out alternate-reverse; } .glitch:hover:after { text-shadow: -7px 0 rgba(29,77,204, 0.7); animation: glitch-loop-2 0.8s infinite ease-in-out alternate-reverse; } @keyframes glitch-loop-1 { 0% { clip: rect(8vw, 9999px, 2vw, 0); } 25% { clip: rect(6vw, 9999px, 20vw, 0); } 50% { clip: rect(16vw, 9999px, 22vw, 0); } 75% { clip: rect(10px, 9999px, 18vw, 0); } 100% { clip: rect(20px, 9999px, 24vw, 0); } } @keyframes glitch-loop-2 { 0% { top: -1px; left: 1px; clip: rect(12vw, 9999px, 28vw, 0); } 25% { top: -6px; left: 4px; clip: rect(16vw, 9999px, 4vw, 0); } 50% { top: -3px; left: 2px; clip: rect(14vw, 9999px, 6vw, 0); } 75% { top: 0px; left: -4px; clip: rect(18vw, 9999px, 8vw, 0); } 100% { top: -1px; left: -1px; clip: rect(10vw, 9999px, 30vw, 0); } } }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter