body{ background: #333; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-top: calc(25% - 4vw);} .glitch { position: relative;margin: 0 auto;color: #fff;font-size: 8vw;font-family: "Exo", sans-serif;font-weight: 600;text-align: center;text-transform: uppercase;letter-spacing: 0.01em;transform: scale3d(1, 1, 1);}.glitch::before, .glitch::after {content: attr(data-text);position: absolute;top: 0;left: 0;right: 0;overflow: hidden;background: #333;color: #fff;clip: rect(0, 900px, 0, 0);}.glitch::before {left: 7px;text-shadow: 1px 0 green;animation: glitch-effect 3s infinite linear alternate-reverse;}.glitch::after {left: 3px;text-shadow: -1px 0 red;animation: glitch-effect 2s infinite linear alternate-reverse;}@keyframes glitch-effect {0% {clip: rect(69px, 9999px, 32px, 0);}5% {clip: rect(90px, 9999px, 42px, 0);}10% {clip: rect(2px, 9999px, 16px, 0);}15% {clip: rect(62px, 9999px, 71px, 0);}20% {clip: rect(5px, 9999px, 19px, 0);}25% {clip: rect(71px, 9999px, 58px, 0);}30% {clip: rect(16px, 9999px, 65px, 0);}35% {clip: rect(3px, 9999px, 41px, 0);}40% {clip: rect(34px, 9999px, 4px, 0);}45% {clip: rect(99px, 9999px, 95px, 0);}50% {clip: rect(47px, 9999px, 84px, 0);}55% {clip: rect(93px, 9999px, 69px, 0);}60% {clip: rect(46px, 9999px, 17px, 0);}65% {clip: rect(83px, 9999px, 23px, 0);}70% {clip: rect(17px, 9999px, 50px, 0);}75% {clip: rect(76px, 9999px, 57px, 0);}80% {clip: rect(5px, 9999px, 67px, 0);}85% {clip: rect(3px, 9999px, 98px, 0);}90% {clip: rect(48px, 9999px, 42px, 0);}95% {clip: rect(70px, 9999px, 19px, 0);}100% {clip: rect(12px, 9999px, 50px, 0);}}