Question

我想拥有它，所以我的背景渐渐变色，而不仅仅是变化。如果可能的话，我也想重复一遍！

我现在正在使用JQuery来更改正文的CSS。

$(document).ready(function(){
     var bgColor = ["#FF0000", "#FF00A6", "#FF00FF"];
     var i = 0;
     var bgRotate = setInterval(function(){    
         $('body').css({'backgroundColor' : bgColor[[i]]});
         i++;
      }, 1000);   

     });

这是fiddle。

Answer 1

为什么不使用@keyframes使用CSS3动画，因为这个问题也被标记为CSS，所以想发布一个

一切都是自我解释的，只有这一行animation: demo 3s infinite linear;只不过是4个属性的简写，即

animation-name
animation-duration
animation-iteration-count
animation-timing-function

在这里，我使用了infinite，因此它会继续迭代，并使用linear来获得一致的动画。

Demo

html, body, div {
    height: 100%;
    width: 100%;
}

div {
    -webkit-animation: demo 3s infinite linear; 
    animation: demo 3s infinite linear;
}

@-webkit-keyframes demo {
    0% {
        background: #FF0000;
    }
    33% {
        background: #0f0;
    }
    100% {
        background: #f0f;
    }
}


@keyframes demo {
    0% {
        background: #FF0000;
    }
    33% {
        background: #0f0;
    }
    100% {
        background: #f0f;
    }
}

Answer 2

你可以使用css3来实现：）

@-webkit-keyframes blink {
    0%   { background:red; }
    50%  { background:green;}
    100% { background:red; }
 }
 @-moz-keyframes blink {
    0%   { background:red; }
    50%  { background:green;}
    100% { background:red; }
 }
 @-ms-keyframes blink {
    0%   { background:red; }
    50%  { background:green;}
    100% { background:red; }
 }
  body{
 -webkit-animation: blink 1s infinite;
 -moz-animation:    blink 1s infinite;
 -ms-animation:     blink 1s infinite;
 }

Answer 3

只需使用CSS transitions即可。它们比jQuery的转换更顺畅，并且具有CSS的所有常用优点（Cascading，不需要JS等）

body { transition: background-color 1s }

要重复，请执行以下操作：

$('body').css({'backgroundColor' : bgColor[i%bgColor.length]});

它对数组长度执行余数除（模）运算。

Answer 4

查看this问题

使用jQueryUI框架，您可以：

$('body').animate({backgroundColor: '#FF0000'}, 'slow');

Answer 5

您可以尝试使用jQuery的animate()方法为其设置动画。假设您有一个带有CSS设置的DIV

#yourDiv{
    background-color: #FFFFFF;
    width: 100px;
    height: 100px;
}

并且您希望在点击ID为 darkenButton 的DIV后，在5秒内将其设置为黑色。您可以使用点击事件：

$('#darkenButton').click(function(){
    $('#yourDiv').animate({
        background-color: '#000000'
    }, 5000); 
});

Answer 6

您必须使用.animate（）而不是.css（）。要重复，你必须做一个功能：

function changeColor(i) {
    var bgColor = ["#FF0000", "#FF00A6", "#FF00FF"];
    if(i > bgColor.length) { i = 0; }
    $('body').animate({'backgroundColor' : bgColor[[i]]});
    var bgRotate = setTimeout(function() {    
        changeColor(++i);
    }, 1000); 
}

Answer 7

您只需在var i's结束时更改array值，查看此http://jsfiddle.net/33VgU/3，这将无限重复背景，如果您随机更改颜色而不是使用Math.random函数可获取var i的值。

如何淡化背景而不仅仅是改变颜色

7 个答案: