@eli5/vue-glitched/dist/client.css

Vue glitched text component

.glitch-wrapper{position:relative}.glitch-wrapper .glitch{color:#fff;font-size:inherit;font-weight:inherit;text-transform:uppercase;font-family:inherit;margin:0;z-index:3;position:absolute;opacity:1;-webkit-animation:blink 6s linear infinite;animation:blink 6s linear infinite;letter-spacing:5px;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:100%}.glitch-wrapper .glitch:after,.glitch-wrapper .glitch:before{display:block;position:absolute;content:attr(data-text);top:0;left:0;-webkit-transform:translate(0);-ms-transform:translate(0);transform:translate(0);height:100%;width:100%;overflow:visible}.glitch-wrapper .glitch:before{text-shadow:-2px 0 #00fdff;z-index:-1;-webkit-animation:glitch 6s linear infinite;animation:glitch 6s linear infinite}.glitch-wrapper .glitch:after,.glitch-wrapper .glitch:before{-webkit-transform:translate(0);-ms-transform:translate(0);transform:translate(0)}.glitch-wrapper .glitch:after{text-shadow:2px 0 red;z-index:-2;-webkit-animation:glitch-2 6s linear infinite;animation:glitch-2 6s linear infinite}@-webkit-keyframes glitch{0%{clip:rect(0,9999px,100px,0);-webkit-transform:translate(-10px);transform:translate(-10px)}1%{clip:rect(70px,9999px,80px,0);-webkit-transform:translate(30px);transform:translate(30px)}2%{clip:rect(80px,9999px,90px,0);-webkit-transform:translate(-30px);transform:translate(-30px)}3%{clip:rect(20px,9999px,30px,0);-webkit-transform:translate(10px);transform:translate(10px)}4%{clip:rect(50px,9999px,60px,0);-webkit-transform:translate(-35px);transform:translate(-35px)}5%{clip:rect(0,9999px,0,0);-webkit-transform:translate(15px);transform:translate(15px)}6%{clip:rect(0,9999px,0,0);-webkit-transform:translate(-5px);transform:translate(-5px)}7%{clip:rect(0,9999px,100px,0);-webkit-transform:translate(0);transform:translate(0);color:#fff}8%{color:#00fdff;-webkit-transform:translate(-50px);transform:translate(-50px)}10%{color:#00fdff;-webkit-transform:translate(-50px);transform:translate(-50px)}11%{color:#00fdff;-webkit-transform:translate(0);transform:translate(0)}12%{color:#fff}13%{clip:rect(0,9999px,100px,0);-webkit-transform:translate(-10px);transform:translate(-10px)}14%{clip:rect(70px,9999px,80px,0);-webkit-transform:translate(30px);transform:translate(30px)}15%{clip:rect(80px,9999px,90px,0);-webkit-transform:translate(-30px);transform:translate(-30px)}16%{clip:rect(20px,9999px,30px,0);-webkit-transform:translate(10px);transform:translate(10px)}17%{clip:rect(50px,9999px,60px,0);-webkit-transform:translate(-35px);transform:translate(-35px)}18%{clip:rect(0,9999px,0,0);-webkit-transform:translate(15px);transform:translate(15px)}19%{clip:rect(0,9999px,0,0);-webkit-transform:translate(-5px);transform:translate(-5px)}20%{clip:rect(0,9999px,100px,0);-webkit-transform:translate(0);transform:translate(0);color:#fff}21%{color:lime;-webkit-transform:translate(-50px);transform:translate(-50px)}23%{color:lime;-webkit-transform:translate(-50px);transform:translate(-50px)}25%{color:lime;-webkit-transform:translate(0);transform:translate(0)}26%{color:#fff}to{-webkit-transform:translate(0);transform:translate(0)}}@keyframes glitch{0%{clip:rect(0,9999px,100px,0);-webkit-transform:translate(-10px);transform:translate(-10px)}1%{clip:rect(70px,9999px,80px,0);-webkit-transform:translate(30px);transform:translate(30px)}2%{clip:rect(80px,9999px,90px,0);-webkit-transform:translate(-30px);transform:translate(-30px)}3%{clip:rect(20px,9999px,30px,0);-webkit-transform:translate(10px);transform:translate(10px)}4%{clip:rect(50px,9999px,60px,0);-webkit-transform:translate(-35px);transform:translate(-35px)}5%{clip:rect(0,9999px,0,0);-webkit-transform:translate(15px);transform:translate(15px)}6%{clip:rect(0,9999px,0,0);-webkit-transform:translate(-5px);transform:translate(-5px)}7%{clip:rect(0,9999px,100px,0);-webkit-transform:translate(0);transform:translate(0);color:#fff}8%{color:#00fdff;-webkit-transform:translate(-50px);transform:translate(-50px)}10%{color:#00fdff;-webkit-transform:translate(-50px);transform:translate(-50px)}11%{color:#00fdff;-webkit-transform:translate(0);transform:translate(0)}12%{color:#fff}13%{clip:rect(0,9999px,100px,0);-webkit-transform:translate(-10px);transform:translate(-10px)}14%{clip:rect(70px,9999px,80px,0);-webkit-transform:translate(30px);transform:translate(30px)}15%{clip:rect(80px,9999px,90px,0);-webkit-transform:translate(-30px);transform:translate(-30px)}16%{clip:rect(20px,9999px,30px,0);-webkit-transform:translate(10px);transform:translate(10px)}17%{clip:rect(50px,9999px,60px,0);-webkit-transform:translate(-35px);transform:translate(-35px)}18%{clip:rect(0,9999px,0,0);-webkit-transform:translate(15px);transform:translate(15px)}19%{clip:rect(0,9999px,0,0);-webkit-transform:translate(-5px);transform:translate(-5px)}20%{clip:rect(0,9999px,100px,0);-webkit-transform:translate(0);transform:translate(0);color:#fff}21%{color:lime;-webkit-transform:translate(-50px);transform:translate(-50px)}23%{color:lime;-webkit-transform:translate(-50px);transform:translate(-50px)}25%{color:lime;-webkit-transform:translate(0);transform:translate(0)}26%{color:#fff}to{-webkit-transform:translate(0);transform:translate(0)}}@-webkit-keyframes glitch-2{0%{clip:rect(0,9999px,100px,0);-webkit-transform:translate(10px);transform:translate(10px)}1%{clip:rect(70px,9999px,80px,0);-webkit-transform:translate(20px);transform:translate(20px)}2%{clip:rect(80px,9999px,90px,0);-webkit-transform:translate(20px);transform:translate(20px)}3%{clip:rect(20px,9999px,30px,0);-webkit-transform:translate(10px);transform:translate(10px)}4%{clip:rect(50px,9999px,60px,0);-webkit-transform:translate(15px);transform:translate(15px)}5%{clip:rect(0,9999px,0,0);-webkit-transform:translate(20px);transform:translate(20px)}6%{clip:rect(0,9999px,0,0);-webkit-transform:translate(0);transform:translate(0)}7%{clip:rect(0,9999px,100px,0);-webkit-transform:translate(0);transform:translate(0);color:#fff}8%{color:rgba(255,0,0,.8);-webkit-transform:translate(50px);transform:translate(50px)}10%{color:rgba(255,0,0,.8);-webkit-transform:translate(50px);transform:translate(50px)}11%{color:rgba(255,0,0,.8);-webkit-transform:translate(0);transform:translate(0)}12%{color:#fff}13%{clip:rect(0,9999px,100px,0);-webkit-transform:translate(10px);transform:translate(10px)}14%{clip:rect(70px,9999px,80px,0);-webkit-transform:translate(20px);transform:translate(20px)}15%{clip:rect(80px,9999px,90px,0);-webkit-transform:translate(20px);transform:translate(20px)}16%{clip:rect(20px,9999px,30px,0);-webkit-transform:translate(10px);transform:translate(10px)}17%{clip:rect(50px,9999px,60px,0);-webkit-transform:translate(15px);transform:translate(15px)}18%{clip:rect(0,9999px,0,0);-webkit-transform:translate(20px);transform:translate(20px)}19%{clip:rect(0,9999px,0,0);-webkit-transform:translate(0);transform:translate(0)}20%{clip:rect(0,9999px,100px,0);-webkit-transform:translate(0);transform:translate(0);color:#fff}21%{color:rgba(255,192,203,.8);-webkit-transform:translate(50px);transform:translate(50px)}23%{color:rgba(255,192,203,.8);-webkit-transform:translate(50px);transform:translate(50px)}25%{color:rgba(255,192,203,.8);-webkit-transform:translate(0);transform:translate(0)}26%{color:#fff}to{-webkit-transform:translate(0);transform:translate(0)}}@keyframes glitch-2{0%{clip:rect(0,9999px,100px,0);-webkit-transform:translate(10px);transform:translate(10px)}1%{clip:rect(70px,9999px,80px,0);-webkit-transform:translate(20px);transform:translate(20px)}2%{clip:rect(80px,9999px,90px,0);-webkit-transform:translate(20px);transform:translate(20px)}3%{clip:rect(20px,9999px,30px,0);-webkit-transform:translate(10px);transform:translate(10px)}4%{clip:rect(50px,9999px,60px,0);-webkit-transform:translate(15px);transform:translate(15px)}5%{clip:rect(0,9999px,0,0);-webkit-transform:translate(20px);transform:translate(20px)}6%{clip:rect(0,9999px,0,0);-webkit-transform:translate(0);transform:translate(0)}7%{clip:rect(0,9999px,100px,0);-webkit-transform:translate(0);transform:translate(0);color:#fff}8%{color:rgba(255,0,0,.8);-webkit-transform:translate(50px);transform:translate(50px)}10%{color:rgba(255,0,0,.8);-webkit-transform:translate(50px);transform:translate(50px)}11%{color:rgba(255,0,0,.8);-webkit-transform:translate(0);transform:translate(0)}12%{color:#fff}13%{clip:rect(0,9999px,100px,0);-webkit-transform:translate(10px);transform:translate(10px)}14%{clip:rect(70px,9999px,80px,0);-webkit-transform:translate(20px);transform:translate(20px)}15%{clip:rect(80px,9999px,90px,0);-webkit-transform:translate(20px);transform:translate(20px)}16%{clip:rect(20px,9999px,30px,0);-webkit-transform:translate(10px);transform:translate(10px)}17%{clip:rect(50px,9999px,60px,0);-webkit-transform:translate(15px);transform:translate(15px)}18%{clip:rect(0,9999px,0,0);-webkit-transform:translate(20px);transform:translate(20px)}19%{clip:rect(0,9999px,0,0);-webkit-transform:translate(0);transform:translate(0)}20%{clip:rect(0,9999px,100px,0);-webkit-transform:translate(0);transform:translate(0);color:#fff}21%{color:rgba(255,192,203,.8);-webkit-transform:translate(50px);transform:translate(50px)}23%{color:rgba(255,192,203,.8);-webkit-transform:translate(50px);transform:translate(50px)}25%{color:rgba(255,192,203,.8);-webkit-transform:translate(0);transform:translate(0)}26%{color:#fff}to{-webkit-transform:translate(0);transform:translate(0)}}@-webkit-keyframes blink{0%{opacity:1}3%{opacity:0}6%{opacity:.4}9%{opacity:0;left:50%;color:#fff}12%{opacity:1}15%{opacity:.2}18%{opacity:1}to{opacity:1}}@keyframes blink{0%{opacity:1}3%{opacity:0}6%{opacity:.4}9%{opacity:0;left:50%;color:#fff}12%{opacity:1}15%{opacity:.2}18%{opacity:1}to{opacity:1}}