background2.css

@import "compass/css3";

$nodeStreak: #a2cef4;
$computationalFogTop: #6084d7;
$computationalFogBot: #6084d7;
$visualDistortionZapper: 360px;
$nanoVelocity: 2s;

html {
  height: 100%;
  overflow: hidden;
}

body {
  position: relative;
  height: 100%;
  background: linear-gradient($computationalFogTop 25%, $nodeStreak 50%, $nodeStreak 50%, $computationalFogBot 100%);  
}

.wrap {
  width: 100%;
  height: 100%;
  position: absolute;
  margin: 0 auto;
  perspective: $visualDistortionZapper;
  perspective-origin: 50% 50%;  
}

.top-plane {
  width: 200%;
  height: 130%;
  position: absolute;
  bottom: -30%;
  left: -50%;
  background-image: -webkit-linear-gradient($nodeStreak 2px, transparent 2px), -webkit-linear-gradient(left, $nodeStreak 2px, transparent 2px);
  background-size: 100px 100px,100px 100px;
  background-position: -1px -1px,-1px -1px;
  transform: rotateX(85deg);
  animation: planeMoveTop $nanoVelocity infinite linear;
}

.bottom-plane {
  @extend .top-plane;
  transform: rotateX(-85deg);
  top: -30%;
  animation: planeMoveBot $nanoVelocity infinite linear;
}

@keyframes planeMoveTop {
  from {
    background-position: 0px -100px,0px 0px;
  }
  to {
    background-position: 0px 0px, 100px 0px;
  }
}

@keyframes planeMoveBot {
  from {
    background-position: 0px 0px,0px 0px;
  }
  to {
    background-position: 0px -100px, 100px 0px;
  }
}

@media (max-height: 350px) {
  .wrap {
    perspective: $visualDistortionZapper - 150;
  }
}