制作CSS3渐变背景旋转效果

Question

3

我在一个元素上设置了CSS3背景渐变，我想让它缓慢旋转。虽然我使用CSS和HTML已经15年了，但我刚开始接触CSS3和HTML5（你知道的，有很多新东西）。是否可以仅旋转背景而不是实际元素？

这是一个背景渐变，即使它在文本的前景中，也要喜欢background-clip。我不想旋转文本，但我确实希望背景旋转。此外，这仅适用于Webkit浏览器。

我愿意使用任何脚本来完成任务-HTML5画布，CSS3变换，Javascript / jQuery等（尽管保持纯CSS3会更好）。但我试图避免使用任何图像。

- Doug the Neard

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jeff B · Accepted Answer

你可以通过使用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/