|
|
| (2 intermediate revisions by the same user not shown) |
| 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;
| |
| − | }
| |
Latest revision as of 05:52, 2 January 2016
/* CSS placed here will be applied to all skins */