EffectHub.com: your best source for gaming

Recommendation

More Effects...

CSS

html {
  background: #222;
}

.laser-beam {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 3px;
  height: 500%;
  background: rgba(99, 195, 231, 0.6);
  -webkit-box-shadow: 0px 0px 15px 0px #63c3e7;
  -moz-box-shadow: 0px 0px 15px 0px #63c3e7;
  box-shadow: 0px 0px 15px 0px #63c3e7;
  -moz-transform-origin: 0 100%;
  -ms-transform-origin: 0 100%;
  -webkit-transform-origin: 0 100%;
  transform-origin: 0 100%;
  -webkit-animation: laser 7s infinite;
}
.laser-beam.red {
  -webkit-animation: laser 7.5s infinite;
  background: rgba(236, 19, 65, 0.6);
  -webkit-box-shadow: 0px 0px 15px 0px #ec1341;
  -moz-box-shadow: 0px 0px 15px 0px #ec1341;
  box-shadow: 0px 0px 15px 0px #ec1341;
}
.laser-beam.purple {
  -webkit-animation: laser 7.3s infinite;
  background: rgba(204, 102, 255, 0.6);
  -webkit-box-shadow: 0px 0px 15px 0px #cc66ff;
  -moz-box-shadow: 0px 0px 15px 0px #cc66ff;
  box-shadow: 0px 0px 15px 0px #cc66ff;
}
.laser-beam.green {
  -webkit-animation: laser 7.7s infinite;
  background: rgba(86, 212, 69, 0.6);
  -webkit-box-shadow: 0px 0px 15px 0px #56d445;
  -moz-box-shadow: 0px 0px 15px 0px #56d445;
  box-shadow: 0px 0px 15px 0px #56d445;
}

@-webkit-keyframes laser {
  0% {
    -moz-transform: rotate(-75deg);
    -ms-transform: rotate(-75deg);
    -webkit-transform: rotate(-75deg);
    transform: rotate(-75deg);
  }
  50% {
    -moz-transform: rotate(75deg);
    -ms-transform: rotate(75deg);
    -webkit-transform: rotate(75deg);
    transform: rotate(75deg);
  }
  100% {
    -moz-transform: rotate(-75deg);
    -ms-transform: rotate(-75deg);
    -webkit-transform: rotate(-75deg);
    transform: rotate(-75deg);
  }
}

HTML

Recommendation

Join Effecthub.com