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

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个属性的简写，即

• 动画名称
• 动画持续时间
• 动画迭代计数
• 动画计时函数

在这里，我使用了 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;
    }
}