I am attempting to create an animated “starburst wheel” in pure CSS. Here’s what I have so far:
http://codepen.io/billdami/pen/qaGNRm
The intended effect is a circle with triangular spokes/rays expanding out from the center, like I have there, but also have the rays be gradients, whose alpha transparency fades out to 0% at the outermost edge (something like this), and that is the part I can’t figure out.
I went with the border-width trick to create the triangles as there doesn’t seem to be any other real way to create triangles with pure css/html (maybe clip paths?), and I was then going to use border-image
to add a gradient to it, but that doesn’t work because you can’t apply a border image to only one side.
Any ideas or suggestions?
edit: clip-path looks like its out as it has no IE support at all…