|
|
| (7 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 */ |
| − |
| |
| − | @mixin textGlitch($name, $intensity, $textColor, $background, $highlightColor1, $highlightColor2, $width, $height) {
| |
| − |
| |
| − | color: $textColor;
| |
| − | position: relative;
| |
| − | $steps: $intensity;
| |
| − |
| |
| − | // Ensure the @keyframes are generated at the root level
| |
| − | @at-root {
| |
| − | // We need two different ones
| |
| − | @for $i from 1 through 2 {
| |
| − | @keyframes #{$name}-anim-#{$i} {
| |
| − | @for $i from 0 through $steps {
| |
| − | #{percentage($i*(1/$steps))} {
| |
| − | clip: rect(
| |
| − | random($height)+px,
| |
| − | $width+px,
| |
| − | random($height)+px,
| |
| − | 0
| |
| − | );
| |
| − | }
| |
| − | }
| |
| − | }
| |
| − | }
| |
| − | }
| |
| − | &:before,
| |
| − | &:after {
| |
| − | content: attr(data-text);
| |
| − | position: absolute;
| |
| − | top: 0;
| |
| − | left: 0;
| |
| − | width: 100%;
| |
| − | background: $background;
| |
| − | clip: rect(0, 0, 0, 0);
| |
| − | }
| |
| − | &:after {
| |
| − | left: 2px;
| |
| − | text-shadow: -1px 0 $highlightColor1;
| |
| − | animation: #{$name}-anim-1 2s infinite linear alternate-reverse;
| |
| − | }
| |
| − | &:before {
| |
| − | left: -2px;
| |
| − | text-shadow: 2px 0 $highlightColor2;
| |
| − | animation: #{$name}-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 */