MediaWiki:Glitch.css

@import "compass/css3";

body{ background:black; font-family: 'Varela', sans-serif; }

.glitch{ color:white; font-size:100px; position:relative; width:400px; margin:0 auto; } @keyframes noise-anim{ $steps:20; @for $i from 0 through $steps{ #{percentage($i*(1/$steps))}{ clip:rect(random(100)+px,9999px,random(100)+px,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{ $steps:20; @for $i from 0 through $steps{ #{percentage($i*(1/$steps))}{ clip:rect(random(100)+px,9999px,random(100)+px,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; }