git.roojs.org Git - roojs1/blob - scss/startbootstrap-sb-admin-2/_error.scss

   1 // Lucas Bebber's Glitch Effect
   2 // Tutorial and CSS from CSS Tricks
   3 // https://css-tricks.com/glitch-effect-text-images-svg/
   4
   5 .error {
   6   color: $gray-800;
   7   font-size: 7rem;
   8   position: relative;
   9   line-height: 1;
  10   width: 12.5rem;
  11 }
  12 @keyframes noise-anim {
  13   $steps: 20;
  14   @for $i from 0 through $steps {
  15     #{percentage($i*(1/$steps))} {
  16       clip: rect(random(100)+px,9999px,random(100)+px,0);
  17     }
  18   }
  19 }
  20 .error:after {
  21   content: attr(data-text);
  22   position: absolute;
  23   left: 2px;
  24   text-shadow: -1px 0 $red;
  25   top: 0;
  26   color: $gray-800;
  27   background: $gray-100;
  28   overflow: hidden;
  29   clip: rect(0,900px,0,0);
  30   animation: noise-anim 2s infinite linear alternate-reverse;
  31 }
  32
  33 @keyframes noise-anim-2 {
  34   $steps: 20;
  35   @for $i from 0 through $steps {
  36     #{percentage($i*(1/$steps))} {
  37       clip: rect(random(100)+px,9999px,random(100)+px,0);
  38     }
  39   }
  40 }
  41 .error:before {
  42   content: attr(data-text);
  43   position: absolute;
  44   left: -2px;
  45   text-shadow: 1px 0 $blue;
  46   top: 0;
  47   color: $gray-800;
  48   background: $gray-100;
  49   overflow: hidden;
  50   clip: rect(0,900px,0,0);
  51   animation: noise-anim-2 3s infinite linear alternate-reverse;
  52 }