javascript css3每2秒更改背景颜色

Question

如何每2秒自动更改HTML背景颜色？ HTML5与CSS3淡入或淡出？

我试着用用定时器和CSS目标过渡没有任何成功

input[type=checkbox] { 
    position: absolute; 
    top: -9999px; 
    left: -9999px; 
} 

label { 
    display: block; 
    background: #08C; 
    padding: 5px; 
    border: 1px solid rgba(0,0,0,.1); 
    border-radius: 2px; 
    color: white; 
    font-weight: bold; 
} 

input[type=checkbox]:checked ~ .to-be-changed { 
    color: red; 
} 

Answer 1

一些变化在这方面的一个变化应该在现代浏览器的工作，如果你知道颜色和颜色提前数：

.animate-me { 
 
    -webkit-animation: bgcolorchange 4s infinite; /* Chrome, Safari, Opera */ 
 
    animation: 4s infinite bgcolorchange; 
 
} 
 
@keyframes bgcolorchange { 
 
    0% { 
 
    background-color: red; 
 
    } 
 
    25% { 
 
    background-color: green; 
 
    } 
 
    50% { 
 
    background-color: yellow; 
 
    } 
 
    75% { 
 
    background-color: yellow; 
 
    } 
 
    100% { 
 
    background-color: red; 
 
    } 
 
} 
 
/* Chrome, Safari, Opera */ 
 
@-webkit-keyframes bgcolorchange { 
 
     0% {background: red;} 
 
     25% {background: yellow;} 
 
     75% {background: green;} 
 
     100% {background: blue;} 
 
} 
 

<div class="animate-me">Trippy! Give me a headache!</div>

http://jsfiddle.net/nnw7xza2/1/

点击演示here！

Answer 2

图它了： -css3 -html5 -javascript定时器

var arrColor = ["#45c1bf", "#f0593e", "#aeacd4", "#bdd630", "#4479bd", "#f5b11e"]; 
 
var footer = document.getElementById("footer"); 
 
var header = document.getElementById("header"); 
 
//helper function - get dark or lighter color 
 
function LightenDarkenColor(col, amt) { 
 
    var usePound = false; 
 
    if (col[0] == "#") { 
 
     col = col.slice(1); 
 
     usePound = true; 
 
    } 
 
    var num = parseInt(col, 16); 
 
    var r = (num >> 16) + amt; 
 
    if (r > 255) r = 255; 
 
    else if (r < 0) r = 0; 
 
    var b = ((num >> 8) & 0x00FF) + amt; 
 
    if (b > 255) b = 255; 
 
    else if (b < 0) b = 0; 
 
    var g = (num & 0x0000FF) + amt; 
 
    if (g > 255) g = 255; 
 
    else if (g < 0) g = 0; 
 
    return (usePound ? "#" : "") + (g | (b << 8) | (r << 16)).toString(16); 
 
    } 
 
    //random new color 
 

 
function GetNewColor() { 
 
    var index = Math.floor((Math.random() * 5) + 1); 
 
    return arrColor[index]; 
 
    } 
 
    // set new color 
 

 
function SetNewColor(color) { 
 
    document.body.style.background = color; 
 
    var NewColor = LightenDarkenColor(color, -20); 
 
    footer.style.backgroundColor = NewColor; 
 
    header.style.backgroundColor = NewColor; 
 
    //footer.style.opacity = 1.2; 
 
    } 
 
    // on document load function start 
 
    (function() { 
 
    var colorSelected = GetNewColor(); 
 
    SetNewColor(colorSelected); 
 
    })(); 
 
//change color timer 
 
window.setInterval(function() { 
 
    var colorSelected = GetNewColor(); 
 
    SetNewColor(colorSelected); 
 
}, 2000);

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
body { 
 
    background: #bdd630; 
 
    transition: background-color 0.5s ease; 
 
    color: #fff; 
 
} 
 
#header { 
 
    background: #000; 
 
    height: 40px; 
 
    text-align: center; 
 
} 
 
#content { 
 
    /* Now, to activate scrollbars 
 
      \t \t and compensate #footer height: */ 
 
    padding-bottom: 40px; 
 
} 
 
#footer { 
 
    background: #000; 
 
    position: fixed; 
 
    bottom: 0px; 
 
    width: 100%; 
 
    /* cause of fixed pos */ 
 
    height: 40px; 
 
    text-align: center; 
 
}

<div id="header">header</div> 
 
<div id="content"> 
 
    <p>content here</p> 
 
</div> 
 
<div id="footer">footer</div>

享受

Answer 3

如果您正在寻找一种易于理解的方式来执行此操作，请查看Basecacti。当然，Basecacti截至目前并不包括将背景嵌入到自己的html页面，所以只需查看背后的源代码即可。举个例子，如果你需要它：

var clr1 = renderColors("clr1"); 
    var clr2 = renderColors("clr2"); 
    var clr3 = renderColors("clr3"); 
    var speed = renderColors("speed"); 

    var deb = document.body; 
    var circle = 0; 
    deb.style.backgroundColor = clr1; 

    setInterval(function(){ 
     if (circle == 0) { 
      deb.style.backgroundColor = clr2; 
      circle = 1; 
     } 
     else if (circle == 1) { 
      deb.style.backgroundColor = clr3; 
      circle = 2; 
     } 
     else { 
      deb.style.backgroundColor = clr1; 
      circle = 0; 
     } 
    }, speed); 

为了使这项工作对你来说，定义了3种不同颜色的clr1，clr2和clr3。然后将速度变量设置为2000 2秒，并且它应该工作。 （在上面的代码中定义这些值的renderColors函数是Basecacti用来获取用户从不同网页定义的颜色的）。另外，Basecacti现在是开源的，因此您可能想要赶快到他们的网站，尽快获得此代码。如果您只希望背景在2秒后更改一次，请将功能从setInterval更改为setTimeout，但不要更改其他任何内容。如果Basecacti网站关闭或停止工作，或者在代码中出现错误，请对此帖子发表评论。