Forked from Jeff Mills's Pen Lasers.
A Pen by Captain Anonymous on CodePen.
<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> |
Forked from Jeff Mills's Pen Lasers.
A Pen by Captain Anonymous on CodePen.
@import "compass/css3"; | |
html { | |
background: #222; | |
} | |
.laser-beam { | |
position: absolute; | |
left: 50%; | |
bottom: 0; | |
width: 3px; | |
height: 500%; | |
margin-left: -1px; | |
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%; | |
height: 90px; | |
width: 2px; | |
left: 50%; | |
position: absolute; | |
margin-left: -1px; | |
-webkit-animation: pulse 3.5s infinite; | |
} | |
@-webkit-keyframes pulse { | |
0% { top: 100%; } | |
100% { top: -100%; } | |
} | |
@-webkit-keyframes laser { | |
0% { @include rotateY(-75deg); } | |
50% { @include rotateY(75deg); } | |
100% { @include rotateY(-75deg); } | |
} |