<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link href='https://fonts.googleapis.com/css?family=Varela' rel='stylesheet' type='text/css'> <style> /* latin-ext */ @font-face { font-family: "Varela"; font-style: normal; font-weight: 400; src: local("Varela"), url(https://fonts.gstatic.com/s/varela/v9/DPEtYwqExx0AWHX5DR4ETvw.woff2) format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: "Varela"; font-style: normal; font-weight: 400; src: local("Varela"), url(https://fonts.gstatic.com/s/varela/v9/DPEtYwqExx0AWHX5Ax4E.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } body { background: black; font-family: "Varela", sans-serif; } .glitch { color: white; font-size: 100px; position: relative; width: 400px; margin: 0 auto; } @keyframes noise-anim { 0% { clip: rect(73px, 9999px, 15px, 0); } 5% { clip: rect(3px, 9999px, 100px, 0); } 10% { clip: rect(93px, 9999px, 80px, 0); } 15% { clip: rect(99px, 9999px, 19px, 0); } 20% { clip: rect(41px, 9999px, 34px, 0); } 25% { clip: rect(82px, 9999px, 54px, 0); } 30% { clip: rect(8px, 9999px, 62px, 0); } 35% { clip: rect(19px, 9999px, 26px, 0); } 40% { clip: rect(82px, 9999px, 50px, 0); } 45% { clip: rect(97px, 9999px, 40px, 0); } 50% { clip: rect(31px, 9999px, 47px, 0); } 55% { clip: rect(34px, 9999px, 34px, 0); } 60% { clip: rect(33px, 9999px, 74px, 0); } 65% { clip: rect(27px, 9999px, 92px, 0); } 70% { clip: rect(59px, 9999px, 100px, 0); } 75% { clip: rect(8px, 9999px, 93px, 0); } 80% { clip: rect(93px, 9999px, 73px, 0); } 85% { clip: rect(100px, 9999px, 13px, 0); } 90% { clip: rect(20px, 9999px, 24px, 0); } 95% { clip: rect(51px, 9999px, 100px, 0); } 100% { clip: rect(57px, 9999px, 7px, 0); } } .glitch:after { content: attr(data-text); position: absolute; left: 2px; text-shadow: -1px 0 red; top: 0; color: white; background: black; overflow: hidden; clip: rect(0, 900px, 0, 0); animation: noise-anim 2s infinite linear alternate-reverse; } @keyframes noise-anim-2 { 0% { clip: rect(99px, 9999px, 98px, 0); } 5% { clip: rect(87px, 9999px, 41px, 0); } 10% { clip: rect(33px, 9999px, 40px, 0); } 15% { clip: rect(33px, 9999px, 43px, 0); } 20% { clip: rect(89px, 9999px, 22px, 0); } 25% { clip: rect(12px, 9999px, 73px, 0); } 30% { clip: rect(47px, 9999px, 18px, 0); } 35% { clip: rect(62px, 9999px, 98px, 0); } 40% { clip: rect(30px, 9999px, 94px, 0); } 45% { clip: rect(69px, 9999px, 65px, 0); } 50% { clip: rect(87px, 9999px, 47px, 0); } 55% { clip: rect(12px, 9999px, 3px, 0); } 60% { clip: rect(63px, 9999px, 14px, 0); } 65% { clip: rect(88px, 9999px, 97px, 0); } 70% { clip: rect(15px, 9999px, 23px, 0); } 75% { clip: rect(88px, 9999px, 20px, 0); } 80% { clip: rect(68px, 9999px, 54px, 0); } 85% { clip: rect(58px, 9999px, 66px, 0); } 90% { clip: rect(98px, 9999px, 97px, 0); } 95% { clip: rect(86px, 9999px, 16px, 0); } 100% { clip: rect(79px, 9999px, 77px, 0); } } .glitch:before { content: attr(data-text); position: absolute; left: -2px; text-shadow: 1px 0 blue; top: 0; color: white; background: black; overflow: hidden; clip: rect(0, 900px, 0, 0); animation: noise-anim-2 3s infinite linear alternate-reverse; } </style> </head> <body> <div class="glitch" data-text="GLITCH">GLITCH</div> </body> </html>