Question

background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#ff2f0f), color-stop(50%,#f42f58));
background: -webkit-linear-gradient(45deg, #ff2f0f 0%,#f42f58 50%);

我们现在所拥有的Exmaple on jsfiddle。我们想知道是否可以慢慢为背景设置动画以使其更有趣，而不仅仅是显示静态渐变。欢迎任何想法！

Answer 1

这是一个旋转的渐变背景。 http://jsfiddle.net/f5v5d/

HTML

<div id="bgwrap"><div id="bg"></div></div>
<h3>Fancy Backgrounds For Everyone!</h3>

CSS

#bgwrap {
    position:fixed;
    left:0;top:0;right:0;bottom:0;
    overflow: visible;
    z-index:-1;
}
#bg {
    position:absolute;
    left:0;top:0;width:100%;height:100%;
    padding:0;margin:0;
    border-radius: 50%;
    background: linear-gradient(45deg, red, gray, red);
    animation: spin 5s linear infinite;
    -moz-animation: spin 5s linear infinite;
    -webkit-animation: spin 5s linear infinite;
    -ms-animation: spin 5s linear infinite;
}

@keyframes spin {
    from { transform: scale3d(2,2,1) rotateZ(0deg);  }
    to { transform: scale3d(2,2,1) rotateZ(360deg); }
}
@-moz-keyframes spin {
    from { -moz-transform: scale3d(2,2,1) rotateZ(0deg); }
    to { -moz-transform: scale3d(2,2,1) rotateZ(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: scale3d(2,2,1) rotateZ(0deg); }
    to { -webkit-transform: scale3d(2,2,1) rotateZ(360deg); }
}
@-ms-keyframes spin {
    from { -ms-transform: scale3d(2,2,1) rotateZ(0deg); }
    to { -ms-transform: scale3d(2,2,1) rotateZ(360deg); }
}

Answer 2

如果您想使用CSS动画，则无法为渐变本身设置动画 - 它们是由浏览器创建的图像，而不是CSS属性 - 但您可以为影响它们的属性设置动画，例如background-size和{{ 1}}。

This post包含更多详细信息，以及有用的examples。

如果您想使用JavaScript，您当然可以非常轻松地随时间更改渐变的各个属性。但这是另一个问题。

无尽的动画CSS倾斜渐变背景

2 个答案: