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-shadow
s 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:
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.