(Replaced content with "→CSS placed here will be applied to all skins: ") |
|||
Line 1: | Line 1: | ||
/* CSS placed here will be applied to all skins */ | /* CSS placed here will be applied to all skins */ | ||
+ | |||
+ | .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; | ||
+ | } |
/* CSS placed here will be applied to all skins */ .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; }