Анимированные паучки к Хэллоуину на чистом CSS

Небольшое  украшение для сайта на Хэллоуин в виде анимированых паучков, которые спускаются на паутинках сверху вниз. Так же присутствует текст с пожеланиями в тематическом оформление в виде жёлтого текста, напоминающего светильник Джека.

Haml

- 6.times do |i|
  %div{:class => "spider_#{i}"}
    .eye.left
    .eye.right
    - 4.times do
      %span.leg.left
    - 4.times do
      %span.leg.right
%h1
  Happy Halloween!
%img{ :src => "http://www.scandiafun.com/images/spiderweb-corner-right.png", :class => "web-right"}
%img{ :src => "http://www.scandiafun.com/images/spiderweb-corner-right.png", :class => "web-left"}

SCSS

@import "compass";

html {
  height: 100%;
  width: 100%; 
  overflow: hidden;
  scroll: none;
}

body {
  background-color: #2F5363;
  @include filter-gradient(#2F5363, #1B2628, horizontal);
  @include background-image(radial-gradient(center, ellipse cover, #2F5363 0%,#1B2628 80%));
  overflow: hidden;
}

[class*="spider"] {
  position: absolute;
  height: 40px;
  width: 50px;
  @include border-radius(50%);
  margin: 40px 0 0 0;
  background: #110D04;
  
  *, &:before, &:after, :after, :before {
    position: absolute;
    content: "";
  }
  
  &:before {
    width: 1px;
    background: #AAAAAA;
    left: 50%;
    top: -320px;
    height: 320px;
  }
  
  .eye {
    top: 16px;
    height: 14px;
    width: 12px;
    background: #FFFFFF;
    @include border-radius(50%);
    
    &:after {
      top: 6px;
      height: 5px;
      width: 5px;
      @include border-radius(50%);
      background: black;
    }
    
    &.left {
      left: 14px;
      
      &:after {
        right: 3px;
      }
    }
    
    &.right {
      right: 14px;
      
      &:after {
        left: 3px;
      }
    }
  }
  
  .leg {
    top: 6px;
    height: 12px;
    width: 14px;
    border-top: 2px solid #110D04;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    border-bottom: 1px solid transparent;
    z-index: -1;
    
    &.left {
      left: -8px;
      @include transform-origin(top, right);
      @include transform(rotate(36deg) skewX(-20deg));
      border-left: 2px solid #110D04;
      @include border-radius(60% 0 0 0 );
      @include animation(legs-wriggle-left 1s 0s infinite);
    }
    
    &.right {
      right: -8px;
      @include transform-origin(top, left);
      @include transform(rotate(-36deg) skewX(20deg));
      border-right: 2px solid #110D04;
      @include border-radius(0 60% 0 0 );
      @include animation(legs-wriggle-right 1s 0.2s infinite);
    }
    
    &:nth-of-type(2)  {
      top: 14px;
      left: -11px;
      @include animation(legs-wriggle-left 1s 0.8s infinite);
    }
    
    &:nth-of-type(3)  {
      top: 22px;
      left: -12px;
      @include animation(legs-wriggle-left 1s 0.2s infinite);
    }
    
    &:nth-of-type(4)  {
      top: 31px;
      left: -10px;
      @include animation(legs-wriggle-left 1s 0.4s infinite);
    }
    
    &:nth-of-type(6)  {
      top: 14px;
      right: -11px;
      @include animation(legs-wriggle-right 1s 0.4s infinite);
    }
    
    &:nth-of-type(7)  {
      top: 22px;
      right: -12px;
      @include animation(legs-wriggle-right 1s 0.7s infinite);
    }
    
    &:nth-of-type(8)  {
      top: 31px;
      right: -10px;
      @include animation(legs-wriggle-right 1s 0.3s infinite);
    }
  }
}

.spider_0  {
  left: 5%;
  @include animation(spider-move-0 5s infinite);
}

.spider_1  {
  left: 20%;
  @include animation(spider-move-1 5s infinite);
}

.spider_2  {
  left: 35%;
  @include animation(spider-move-2 5s infinite);
}

.spider_3  {
  right: 35%;
  margin-top: 160px;
  @include animation(spider-move-3 5s infinite);
}

.spider_4  {
  right: 20%;
  margin-top: 50px;
  @include animation(spider-move-4 5s infinite);
}

.spider_5  {
  right: 5%;
  margin-top: 210px;
  @include animation(spider-move-5 5s infinite);
}

h1 {
  position: absolute;
  left: 6%;
  bottom: 12%;
  font-family: 'Eater', cursive;
  font-size: 8.5vw;
  color: #111111;
  @include animation(flicker 4s 0s infinite);
}

.web-right {
  position: absolute;
  height: 200px;
  width: auto;
  right: -10px;
  top: -10px;
  z-index: -1;
  opacity: 0.2;
}

.web-left {
  position: absolute;
  left: -10px;
  top: -10px;
  @include transform(rotate(-90deg));
  z-index: -1;
  opacity: 0.2;
}

@include keyframes(flicker) {
  0%, 6%, 12% {
    text-shadow: none;
    color: #111111;
  }
  3%, 9% {
    text-shadow: 0 0 8px rgba(#fa6701,0.6);
    color: #fa6701;
  }
  60% {
    text-shadow: 0 0 8px rgba(#fa6701,0.6),
     0 0 16px rgba(#fa6701,0.4), 
     0 0 20px rgba(255,0,84,0.2), 
     0 0 22px rgba(255,0,84,0.1);
    color: #fa6701;
  }
  100% {
    text-shadow: 0 0 8px rgba(#fa6701,0.6),
     0 0 16px rgba(#fa6701,0.4), 
     0 0 20px rgba(255,0,84,0.2), 
     0 0 22px rgba(255,0,84,0.1);
    color: #fa6701;
  }
}

@include keyframes(legs-wriggle-left) {
  0%, 100% {
    @include transform(rotate(36deg) skewX(-20deg));
  }
  25%, 75% {
    @include transform(rotate(15deg) skewX(-20deg));
  }
  50% {
    @include transform(rotate(45deg) skewX(-20deg));
  }
}

@include keyframes(legs-wriggle-right) {
  0%, 100% {
    @include transform(rotate(-36deg) skewX(20deg));
  }
  25%, 75% {
    @include transform(rotate(-15deg) skewX(20deg));
  }
  50% {
    @include transform(rotate(-45deg) skewX(20deg));
  }
}

$n: 6;
@for $i from 0 to $n {
  $height: random(190) + 40 + "px";
  $movement: random(100) + 20 + "px";
  $random-percentage: random(40) + 30 + "%";
  
  @include keyframes(spider-move-#{$i}) {
    0%, 100% {
      margin-top: #{$height};
    }
    #{$random-percentage} {
      margin-top: calc(#{$height} + #{$movement});
    }
  }
}