Lasers

index.html

<div class="laser-beam"></div>
<div class="laser-beam red"></div>
<div class="laser-beam purple"></div>
<div class="laser-beam green"></div>
<div class="oval"></div>

Lasers.markdown

Lasers

Forked from Jeff Mills's Pen Lasers.

Forked from Jeff Mills's Pen Lasers.

A Pen by Shawn Dones on CodePen.

License.

style.scss

@import "compass/css3";
html {
  background: #222;
}

.laser-beam {
  position: absolute;
  left: 0;
  bottom: 50%;
  height: 3px;
 width: 500%;
  background: rgba(99,195,231,0.6);
  -webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,231,1);
  -moz-box-shadow: 0px 0px 15px 0px rgba(0,0,231,1);
  box-shadow: 0px 0px 15px 0px rgba(0,0,231,1);
  @include transform-origin(0, 100%);
  -webkit-animation: laser 7s infinite;
  
   &.red {
    -webkit-animation: laser 7s infinite;
    background: rgba(236,19,65,0.6);
    -webkit-box-shadow: 0px 0px 15px 0px rgba(236,19,65,1);
    -moz-box-shadow: 0px 0px 15px 0px rgba(236,19,65,1);
    box-shadow: 0px 0px 15px 0px rgba(236,19,65,1);
  }
  
  &.purple {
    -webkit-animation: laser 7s infinite;
    background: rgba(204, 102, 255, 0.6);
    -webkit-box-shadow: 0px 0px 15px 0px rgba(204, 102, 255,1);
    -moz-box-shadow: 0px 0px 15px 0px rgba(204, 102, 255,1);
    box-shadow: 0px 0px 15px 0px rgba(204, 102, 255,1);
  }
  
  &.green {
    -webkit-animation: laser 7s infinite;
    background: rgba(86, 212, 69, 0.6);
    -webkit-box-shadow: 0px 0px 15px 0px rgba(86, 212, 69,1);
    -moz-box-shadow: 0px 0px 15px 0px rgba(86, 212, 69,1);
    box-shadow: 0px 0px 15px 0px rgba(86, 212, 69,1);
  }
}
.oval {
  background: rgba(255, 255, 255, 0);
    -webkit-box-shadow: 0px 6px 20px 0px rgba(255, 255, 255,.5);
    -moz-box-shadow: 0px 6px 20px 0px rgba(255, 255, 255,.5);
    box-shadow: 0px 6px 20px 0px rgba(255, 255, 255,.5);
  border-radius: 50%;
  width: 90px;
  height: 2px;
  bottom: 50%;
  position: absolute;
  margin-top: -2px;
  -webkit-animation: pulse 3.5s infinite;

}
@-webkit-keyframes pulse {
  0%  { right: 100%; }
  100% { right: -100%; }
}
@-webkit-keyframes laser {
  0%  { @include rotateX(-75deg); }
  50% { @include rotateX(75deg); }
  100% { @include rotateX(-75deg); }
}