Question

在这里看到了一些类似的问题，但似乎无法弄清楚这个问题。

我有一个顶部为黑色，底部为蓝色的渐变色。我希望蓝色在连续循环中淡化成几种不同的颜色，但黑色要保持原位。像这样：http://i.stack.imgur.com/6k9EN.gif

看到了像this one这样的一些演示，其中渐变动画连续但它只是一个大的渐变垂直移动关键帧，这对我不起作用。想知道是否有人可以推荐一个解决方案。

到目前为止，这是非动画代码：http://jsfiddle.net/ssccdd/9qA3L/

body{
      background: -moz-linear-gradient(top, #000000 80%, #3300FF 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8));
      background: -webkit-linear-gradient(top,  #1e5799 80%,#3300FF 100%);
      background: -o-linear-gradient(top,  #000000 80%,#3300FF 100%);
      background: -ms-linear-gradient(top,  #000000 80%,#3300FF 100%);
      background: linear-gradient(to bottom,  #000000 80%,#3300FF 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#3300FF',GradientType=0 );
      background-attachment: fixed;

}

Answer 1

您可能无法为渐变颜色设置动画，但可以为背景颜色设置动画。

因此，在您的情况下，具有从黑色到透明的不变的线性渐变。然后使用CSS过渡更改背景颜色。

以下是一个工作示例：http://jsfiddle.net/qSJa8/

我必须包含javascript才能从一种颜色切换到另一种颜色：

var classes = [ "stop1", "stop2", "stop3", "stop4" ];

var stopIndex = 0;
var lastClass = classes[0];
window.setInterval(function() {
    ++stopIndex;
    if(stopIndex >= classes.length) {
        stopIndex = 0;
    }
    var newClass = classes[stopIndex];
    $('#sampleDiv').removeClass(lastClass).addClass(newClass);
    lastClass = newClass;

}, 2000);

和css：

#sampleDiv {
    height:300px;   
    background-image: linear-gradient(180deg, black, black 50%, transparent);
    transition: background-color 2s;
}

.stop1 {
    background-color:blue; 
}

.stop2 {
    background-color:purple;
}

.stop3 {
    background-color:green;
}

.stop4 {
    background-color:yellow;
}

用css连续动画渐变的一种颜色

1 个答案: