CSS3 lens flare

1.8k views Asked by At

I'm playing at CodePen and trying to make a cinematic CSS3 lens flare like in multimillion blockbusters. I tried to make it through the box-shadows but I'm unable to make them with needed shape, this is totally wrong. I can't use canvas or JS at all, so the point is to make it only with css, if it's possible. The result effect I want to get is something like this:

enter image description here

http://codepen.io/byob/pen/azzbjB This is that pen

@-webkit-keyframes blink {
  0% { box-shadow: none; }
  100% {
    box-shadow: inset 10px 0px 50px 0px rgba(255, 0, 0, 0.5),
                inset -10px 0px 50px 0px rgba(255, 0, 0, 0.5),
                1px 1px 500px 30px rgba(255, 0, 0, 0.5),
                50px 0px 0px 0px rgba(255, 0, 0, 0.5),
                -20px 0px 0px 0px rgba(255, 0, 0, 0.5);
  }
}

The one i want to do, is way more complex, so, guess i need help or the fact that it is impossible w/o js.

0

There are 0 answers