javascript css3 change background color every 2 se

问题:

How can I change the HTML background color automatically every 2 seconds? HTML5 with CSS3 fade in or fadeout?

I tried to use transition with timer and CSS target without any success

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;
}

回答1:

A few changes A variation on this should work in modern browsers, if you know the colors and the number of colors in advance:

.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/

Click to demohere!

回答2:

Figure it up with: -css3 -html5 -javascript timer

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
         		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>

Enjoy

回答3:

If you are looking for an easy to understand way to do this, check out Basecacti. Of course, Basecacti as of now does not include embedding of the background on to your own html page, so just look at the source code behind it. Here's an example if you need it:

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);

To make this work for you, define 3 different colors as clr1, clr2, and clr3. Then set the speed variable to 2000 for 2 secs, and it should work. (The renderColors function that defines these values in the above code is what Basecacti uses to get the colors that users define from a different webpage.) Also, Basecacti is Open-Source for now, so you might want to hurry over to their site and get this code ASAP. If you only want the background to change once after 2 seconds, change the function from setInterval to setTimeout, but don't change anything else. Please comment on this post if the Basecacti website shuts down or stops working, or if I have an error in the code.