<!-- Spiders -->
<div id="spider1" class="spider">
  <div class="eyes-left"></div>
  <div class="eyes-right"></div>
  <div class="spider-butt"></div>
  <div class="front-leg-left"></div>
  <div class="second-leg-left"></div>
  <div class="third-leg-left"></div>
  <div class="back-leg-left"></div>
  <div class="front-leg-right"></div>
  <div class="second-leg-right"></div>
  <div class="third-leg-right"></div>
  <div class="back-leg-right"></div>
</div>

<!-- Welcome box -->
<main class="c-welcome">
  <h1 class="c-welcome__title">Welcome to</h1>
  <svg class="c-welcome__codepen" viewBox="0 0 412 75" xmlns="http://www.w3.org/2000/svg">
  <title>
    CodePen
  </title>
  <g fill="#FFF" fill-rule="evenodd">
    <path d="M26.14 18.983c4.617 0 8.852 1.667 12.138 4.43l4.47-5.33c-4.495-3.78-10.29-6.06-16.61-6.06C11.882 12.022.283 23.62.283 37.878c0 14.256 11.6 25.855 25.857 25.855 6.32 0 12.113-2.282 16.61-6.06l-4.472-5.33c-3.286 2.76-7.52 4.428-12.14 4.428-10.418 0-18.895-8.476-18.895-18.894 0-10.42 8.477-18.897 18.896-18.897"/>
    <path d="M169.274 55.283h-10.442V20.475h10.442c9.597 0 17.404 7.808 17.404 17.404 0 9.595-7.807 17.403-17.404 17.403m0-41.77H155.35c-1.92 0-3.48 1.56-3.48 3.48v41.77c0 1.922 1.56 3.48 3.48 3.48h13.924c13.436 0 24.365-10.93 24.365-24.364 0-13.436-10.93-24.366-24.366-24.366"/>
    <path d="M212.487 16.995v41.77c0 1.92 1.56 3.48 3.48 3.48h29.007v-6.96H219.45V41.36h16.242V34.4H219.45V20.475h25.524v-6.96h-29.007c-1.92 0-3.48 1.557-3.48 3.48"/>
    <path d="M317.85 16.995v41.77c0 1.92 1.56 3.48 3.48 3.48h29.007v-6.96h-25.525V41.36h16.244V34.4h-16.244V20.475h25.525v-6.96H321.33c-1.92 0-3.48 1.557-3.48 3.48"/>
    <path d="M284.725 34.398h-11.603V20.475h11.603c3.84 0 6.96 3.123 6.96 6.962 0 3.838-3.12 6.96-6.96 6.96m0-20.883H269.64c-1.92 0-3.48 1.558-3.48 3.48v45.25h6.962V41.36h11.603c7.677 0 13.923-6.247 13.923-13.923 0-7.678-6.246-13.923-13.923-13.923"/>
    <path d="M404.757 13.514V49.15l-28.652-34.384c-.94-1.127-2.482-1.544-3.86-1.044-1.378.5-2.296 1.807-2.296 3.272v45.25h6.96V26.61l28.654 34.382c.674.81 1.66 1.252 2.674 1.252.397 0 .797-.066 1.185-.207 1.378-.5 2.296-1.808 2.296-3.273v-45.25h-6.963z"/>
    <path d="M112.047 34.04l-13.834-9.252V9.905l25.002 16.667-11.168 7.47zm5.74 3.84l7.983-5.34v10.678l-7.984-5.34zM98.212 50.97l13.834-9.252 11.168 7.47-25.002 16.666V50.972zm-20.215-9.252l13.834 9.252v14.885l-25-16.668 11.166-7.468zm-5.74-3.84l-7.982 5.34v-10.68l7.983 5.342zm19.574-13.09l-13.834 9.253-11.167-7.468L91.833 9.904v14.884zm3.19 20.64L83.738 37.88l11.286-7.55 11.286 7.55-11.287 7.547zm37.075-19.415c-.017-.09-.032-.18-.056-.27-.014-.05-.032-.1-.05-.153-.024-.078-.05-.157-.08-.233-.023-.052-.048-.104-.072-.155-.034-.073-.07-.144-.11-.213-.028-.05-.06-.1-.09-.148-.043-.066-.087-.13-.135-.194-.035-.046-.07-.093-.11-.137-.05-.06-.103-.117-.158-.173-.042-.043-.084-.084-.127-.125-.058-.052-.12-.102-.18-.15-.05-.038-.096-.076-.146-.11-.017-.013-.034-.028-.052-.04L96.792 1.29c-1.07-.716-2.468-.716-3.54 0L59.317 23.913c-.02.01-.035.026-.053.04-.05.034-.097.072-.145.108-.06.05-.123.1-.18.152-.044.04-.086.082-.127.125-.055.056-.108.114-.16.174-.037.045-.073.09-.108.137-.048.064-.092.13-.135.195-.03.05-.062.097-.09.148-.04.07-.076.14-.11.212-.023.05-.05.102-.07.154-.03.077-.058.155-.083.233-.017.052-.035.102-.05.154-.022.088-.04.178-.055.268-.01.046-.02.09-.027.137-.018.138-.028.277-.028.417V49.19c0 .143.01.28.028.42.007.046.018.09.026.136.015.09.032.18.055.267.014.053.032.105.05.156.024.078.05.155.082.233.02.053.047.102.07.154.034.072.07.142.11.212.028.05.06.098.09.145.043.068.087.132.135.196.035.048.07.093.11.14.05.057.103.115.16.17.04.042.082.085.126.124.057.053.12.105.18.154.048.036.095.074.145.108.018.014.034.028.053.04L93.253 74.47c.536.36 1.152.537 1.77.537.617 0 1.234-.178 1.77-.537l33.937-22.624c.018-.012.035-.026.052-.04.05-.034.097-.072.145-.108.062-.05.123-.1.18-.154.044-.038.086-.08.128-.123.055-.055.11-.113.16-.172.037-.044.073-.09.108-.137.048-.063.092-.127.135-.194.03-.047.062-.096.09-.146.04-.07.076-.142.11-.214.024-.05.05-.1.07-.153.033-.078.058-.155.083-.234.018-.053.036-.104.05-.157.025-.087.04-.177.057-.267.008-.046.02-.09.025-.138.018-.137.03-.275.03-.416V26.566c0-.14-.012-.28-.03-.418-.006-.046-.017-.09-.025-.137z"/>
  </g>
</svg>
  <h2 class="c-welcome__subtitle">at <a class="c-welcome__link" href="https://www.backstopsolutions.com/careers">Backstop Solutions</a></h2>
</main>
////////////////////////////////////////
//// Variables
//~~ Colors from:  http://colorhunt.co/c/39601
$halloween-gray-dark: #2F3C4F;
$halloween-gray-light: #506E86;
$halloween-orange-dark: #DE703B;
$halloween-orange-light: #FCB040;
$white: #fff;

// Font
$font-roboto: 'Roboto', sans-serif;

// Spider
$spider-body-color: #333;
$spider-eye-color: crimson;
$fang-time: 1.5s;
$crawl-time: 300ms;
$run-time: 10s;

////////////////////////////////////////
//// Keyframes
// Gradient
@keyframes animationgradienttitle {
  0%   { background-position: 0 1600px; }
  100% { background-position: 1600px 0; }
}

// Spider fangs
@keyframes fangBitingLeft {
  45% { transform: rotate(0deg);  }
  50% { transform: rotate(12deg); }
  65% { transform: rotate(0deg);  }
  80% { transform: rotate(12deg); }
  95% { transform: rotate(0deg);  }
}

@keyframes fangBitingRight {
  45% { transform: rotate(0deg);   }
  50% { transform: rotate(-12deg); }
  65% { transform: rotate(0deg);   }
  80% { transform: rotate(-12deg); }
  95% { transform: rotate(0deg);   }
}

// Spider left legs
@keyframes frontLeftLeg {
  25%  { transform: rotate(0deg);   }
  50%  { transform: rotate(-20deg); }
  75%  { transform: rotate(0deg);   }
  100% { transform: rotate(-20deg); }
}

@keyframes secondLeftLeg {
  25%  { transform: rotate(-45deg); }
  50%  { transform: rotate(-25deg); }
  75%  { transform: rotate(-45deg); }
  100% { transform: rotate(-25deg); }
}

@keyframes thirdLeftLeg {
  25%  { transform: rotate(-75deg); }
  50%  { transform: rotate(-95deg); }
  75%  { transform: rotate(-75deg); }
  100% { transform: rotate(-95deg); }
}

@keyframes backLeftLeg {
  25%  { transform: rotate(-130deg); }
  50%  { transform: rotate(-110deg); }
  75%  { transform: rotate(-130deg); }
  100% { transform: rotate(-110deg); }
}

// Spider right legs
@keyframes frontRightLeg {
  25%  { transform: rotate(20deg) scaleX(-1); }
  50%  { transform: rotate(0deg) scaleX(-1);  }
  75%  { transform: rotate(20deg) scaleX(-1); }
  100% { transform: rotate(0deg) scaleX(-1);  }
}

@keyframes secondRightLeg {
  25%  { transform: rotate(25deg) scaleX(-1); }
  50%  { transform: rotate(45deg) scaleX(-1); }
  75%  { transform: rotate(25deg) scaleX(-1); }
  100% { transform: rotate(45deg) scaleX(-1); }
}

@keyframes thirdRightLeg {
  25%  { transform: rotate(95deg) scaleX(-1); }
  50%  { transform: rotate(75deg) scaleX(-1); }
  75%  { transform: rotate(95deg) scaleX(-1); }
  100% { transform: rotate(75deg) scaleX(-1); }
}

@keyframes backRightLeg {
  25%  { transform: rotate(110deg) scaleX(-1); }
  50%  { transform: rotate(130deg) scaleX(-1); }
  75%  { transform: rotate(110deg) scaleX(-1); }
  100% { transform: rotate(130deg) scaleX(-1); }
}

// Spider 1
@keyframes spider1 {
  10% { transform: rotate(0deg) translateY(0); visibility: visible;               }
  20% { transform: rotate(-30deg) translateY(0); visibility: visible;             }
  40% { transform: rotate(-30deg) translateY(-700px); visibility: visible;        }
  41% { transform: rotate(-30deg) translateY(-700px); visibility: hidden;         }
  42% { transform: rotate(180deg) translate(1200px, 1200px); visibility: visible; }
}

////////////////////////////////////////
//// Body
body {
  background-color: $halloween-orange-dark;
  font-family: $font-roboto;
  padding-top: 30vh;
  position: relative;
}

////////////////////////////////////////
//// Welcome box
.c-welcome {
  background-color: $halloween-gray-dark;
  box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
  margin: 0 auto;
  max-width: 30em;
  padding: 2vw;
  text-align: center;  
  text-transform: uppercase;
}

.c-welcome__title {
  background: -webkit-linear-gradient(top, $halloween-orange-dark, $halloween-gray-dark, $halloween-orange-dark);
  background-size: 200px 1600px;
  color: $white;
  font-size: 4em;
  font-weight: 400;
  line-height: 1;
  margin: 0;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  animation-duration: 8s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: animationgradienttitle;
}

.c-welcome__codepen {
  margin-bottom: 0.8em;
  margin-top: 0.8em;
  width: 350px;
}

.c-welcome__subtitle {
  background: -webkit-linear-gradient(top, $halloween-orange-dark, $halloween-gray-dark, $halloween-orange-dark);
  background-size: 200px 1600px;
  color: $white;
  font-size: 3em;
  font-weight: 400;
  line-height: 1.2;
  margin: 0;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  animation-duration: 8s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: animationgradienttitle;
}

.c-welcome__link {
  color: $white;
  text-decoration: none;
}

////////////////////////////////////////
//// Spider
.spider {
  background-color: $spider-body-color;
  border-radius: 50%;
  height: 3em;
  left: 50%;
  position: absolute;
  top: 60%;
  transform-origin: center center;
  width: 3em;
  z-index: -1;
  
  &:before,
  &:after {
    background-color: $spider-body-color;
    content: '';
    height: 0.8em;
    position: absolute;
    top: -7px;
    width: 0.8em;
  }
  
  // Left fang
  &:before {
    border-top-left-radius: 100%;
    left: 10px;

    animation-duration: $fang-time;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-name: fangBitingLeft;
  }
  
    // Right fang
  &:after {
    border-top-right-radius: 100%;
    right: 10px;

    animation-duration: $fang-time;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-name: fangBitingRight;
  }
}

.eyes-left,
.eyes-right {
  background-color: $spider-eye-color;
  border-radius: 50%;
  height: 0.8em;
  position: absolute;
  top: 10px;
  width: 0.5em;
  
  &:before {
    background-color: $spider-eye-color;
    border-radius: 50%;
    content: '';
    height: 0.6em;
    position: absolute;
    top: 10px;
    width: 0.3em;
  }
}

.eyes-left {
  left: 15px;
  
  &:before {
    left: -6px;
  }
}

.eyes-right {
  right: 15px;
  
  &:before {
    right: -6px;
  }
}

.spider-butt {
  background-color: $spider-body-color;
  border-radius: 50%;
  height: 4em;
  left: -10px;
  position: absolute;
  top: 35px;
  right: -10px;
}

.front-leg-left {
  background-color: $spider-body-color;
  border-bottom-left-radius: 50%;
  border-top: 5px solid crimson;
  border-top-left-radius: 50%;
  height: 3em;
  left: -10px;
  position: absolute;
  top: 0px;
  transform: rotate(-20deg);
  transform-origin: bottom right;
  width: 0.5em;

  animation-duration: $crawl-time;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-name: frontLeftLeg;
}

.second-leg-left {
  background-color: $spider-body-color;
  border-bottom-left-radius: 50%; 
  border-top: 5px solid crimson;
  border-top-left-radius: 50%;
  height: 3em;
  left: -13px;
  position: absolute;
  top: 15px;
  width: 0.5em;
  transform: rotate(-25deg);
  transform-origin: bottom right;

  animation-duration: $crawl-time;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-name: secondLeftLeg;
}

.third-leg-left {
  background-color: $spider-body-color;
  content: '';
  height: 3em;
  position: absolute;
  top: 25px;
  left: -10px;
  width: 0.5em;
  transform: rotate(-95deg);
  transform-origin: bottom right;
  border-top: 5px solid crimson;
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;

  animation-name: thirdLeftLeg;
  animation-duration: $crawl-time;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

.back-leg-left {
  background-color: $spider-body-color;
  height: 3em;
  position: absolute;
  top: 38px;
  left: 0px;
  width: 0.5em;
  transform: rotate(-110deg);
  transform-origin: bottom right;
  border-top: 5px solid crimson;
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%; 

  animation-name: backLeftLeg;
  animation-duration: $crawl-time;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

.front-leg-right {
  background-color: $spider-body-color;
  height: 3em;
  position: absolute;
  top: 0px;
  right: -15px;
  width: 0.5em;
  transform:
    rotate(0deg)
    scaleX(-1);
  transform-origin: bottom left;
  border-top: 5px solid crimson;
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;

  animation-name: frontRightLeg;
  animation-duration: $crawl-time;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

.second-leg-right {
  background-color: $spider-body-color;
  height: 3em;
  position: absolute;
  top: 22px;
  right: -20px;
  width: 0.5em;
  transform:
    rotate(45deg)
    scaleX(-1);
  transform-origin: bottom left;
  border-top: 5px solid crimson;
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%; 

  animation-name: secondRightLeg;
  animation-duration: $crawl-time;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

.third-leg-right {
  background-color: $spider-body-color;
  content: '';
  height: 3em;
  position: absolute;
  top: 30px;
  right: -10px;
  width: 0.5em;
  transform:
    rotate(75deg)
    scaleX(-1);
  transform-origin: bottom left;
  border-top: 5px solid crimson;
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%; 
 
  animation-name: thirdRightLeg;
  animation-duration: $crawl-time;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

.back-leg-right {
  background-color: $spider-body-color;
  height: 3em;
  position: absolute;
  top: 43px;
  right: 0px;
  width: 0.5em;
  transform:
    rotate(130deg)
    scaleX(-1);
  transform-origin: bottom left;
  border-top: 5px solid crimson;
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;

  animation-name: backRightLeg;
  animation-duration: $crawl-time;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

#spider1 {
  top: 32vh;

  animation-name: spider1;
  animation-duration: $run-time;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.76, 0.29, 0, 0.79);
}
View Compiled

External CSS

  1. https://fonts.googleapis.com/css?family=Roboto:300,400,700

External JavaScript

This Pen doesn't use any external JavaScript resources.