|
|
Line 1: |
Line 1: |
| /* CSS placed here will be applied to all skins */ | | /* CSS placed here will be applied to all skins */ |
− |
| |
− | @import "compass/css3";
| |
− |
| |
− | .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;
| |
− | }
| |
Revision as of 05:50, 2 January 2016
/* CSS placed here will be applied to all skins */