制作CSS3渐变背景旋转

时间:2012-04-20 21:18:39

标签: jquery animation css3 webkit gradient

我在一个项目上设置了CSS3背景渐变,我想让它慢慢旋转。我刚开始使用CSS3& HTML5(请注意,我已经使用CSS和HTML 15年了,虽然有很多新东西)。是否可以只旋转背景,而不是实际元素?

(删除了指向页面的链接,因为它不再存在)它是一个背景渐变,即使它位于文本的前景中,得到爱的背景剪辑);我不希望文本旋转,但我确实想要背景。此外,这仅适用于webkit浏览器。

我愿意使用它完成的任何脚本 - HTML5画布,CSS3转换,Javascript / jQuery等(尽管保持它纯粹的CSS3会很棒)。但是,我试图避免使用任何图像。

1 个答案:

答案 0 :(得分:3)

您可以通过使用JavaScript动画CSS属性来实现此目的。这是一个使用一些jQuery来轻松更改CSS的示例:

演示:http://jsfiddle.net/HYDAj/2/

基本上,我使用setInterval每100毫秒更改一次渐变角度。我无法使您的特定渐变工作,此示例仅适用于WebKit浏览器,但这将使您开始。

我还应该注意,WebKit是支持`background-clip:text'的唯一原因,所以这是在Firefox或IE中不起作用的另一个原因。

如果你不关心使用任何jQuery,这里是纯JavaScript方式:

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