Geek asks and answers

Creating CSS3 Gradient Background Spin

I set the CSS3 background gradient for the element and I would like it to rotate slowly. I am just starting with CSS3 and HTML5 (of course, I have used CSS and HTML for 15 years, but there is a lot of new). Is it possible to rotate only the background and not the actual element?

If you want to see it, it is http://www.itjustwerx.net - an infinity symbol at the top left (yes, this is a background gradient, even if it is in the foreground of the text, it should like a background clip); I don't want the text to rotate, but I need a background. Also, this only works in webkit browsers.

I am ready to use everything the script does - HTML5 canvas, CSS3 transforms, Javascript / jQuery, etc. (although keeping it pure CSS3 would be great). However, I try to avoid using any images.

+3
source share
1 answer

You can do this by animating the CSS property using JavaScript. Here is an example that uses a bit of jQuery to facilitate CSS modification:

Demo: http://jsfiddle.net/HYDAj/2/

Basically, I use setIntervalto change the gradient angle every 100 ms. I couldn’t get your specific gradient to work, and this example only works in WebKit browsers, but it will get you started.

, WebKit "background-clip: text", , Firefox IE.

, - jQuery, JavaScript:

http://jsfiddle.net/HYDAj/3/

+3

More articles:


All Articles