使 CSS3 渐变背景旋转



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

(删除了页面链接,因为它不再存在)即使它在文本的前景上,它也是一个背景渐变,必须喜欢背景剪辑);我不希望文本旋转,但我确实希望背景旋转。此外,这仅适用于 webkit 浏览器。

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

您可以通过使用 JavaScript 对 CSS 属性进行动画处理来执行此操作。 下面是一个使用一些jQuery来简化更改CSS的示例:

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

基本上,我使用setInterval每 100 毫秒更改一次梯度角。 我无法让你的特定渐变工作,这个例子只适用于 WebKit 浏览器,但这会让你开始。

我还应该指出,WebKit是唯一支持"背景剪辑:文本"的人,所以这是在Firefox或IE中不起作用的另一个原因。

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

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

最新更新