Making CSS3 Gradient Background Spin
I've set a CSS3 background gradient on an item, and I'd like to have it spin slowly. I'm just starting with CSS3 & HTML5 (Mind you, I've used CSS & HTML for 15 years, there's a lot of new stuff though). Is it possible to spin just the background, not the actual element?
If you want to see it, it's at http://www.itjustwerx.net - the infinity symbol on the left at the top (yes, it is a background gradient even though it's on the text's foreground, gotta love background-clip); I don't want the text to rotate but I do want the background to. Also, this only works in webkit browsers.
Basically, I use
setInterval to change the gradient angle every 100ms. I couldn't get your specific gradient to work, and this example only works in WebKit browsers, but that will get you started.
I should also note that WebKit is alone in supporting `background-clip: text', so that is another reason this won't work in Firefox or IE.
This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here