使 CSS3 渐变背景旋转

【问题标题】：Making CSS3 Gradient Background Spin使 CSS3 渐变背景旋转
【发布时间】：2012-05-02 11:29:10
【问题描述】：

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

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

我愿意使用任何脚本来完成它——HTML5 画布、CSS3 转换、Javascript/jQuery 等（尽管保持纯 CSS3 会很棒）。不过，我尽量避免使用任何图片。

【问题讨论】：

【解决方案1】：

您可以通过使用 JavaScript 为 CSS 属性设置动画来做到这一点。这是一个使用一点 jQuery 来轻松更改 CSS 的示例：

基本上，我使用setInterval 每 100 毫秒更改一次渐变角度。我无法让您的特定渐变生效，并且此示例仅适用于 WebKit 浏览器，但这将帮助您入门。

我还应该指出，WebKit 是单独支持 `background-clip: text' 的，所以这是它在 Firefox 或 IE 中不起作用的另一个原因。

如果你不想使用任何 jQuery，这里是纯 JavaScript 方式：

【讨论】：

正是我想要的，谢谢！完美满足我的需求。至于 WebKit 的限制，目前它几乎是一个概念证明——我相信我最终会以另一种方式来做。只是想看看我是否可以用纯代码来实现我的设计理念。