Question

如何每2秒自动更改HTML背景颜色？带有CSS3的HTML5淡入还是淡出？

我尝试使用带有计时器和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

一些更改如果您事先知道颜色和颜色数量，那么现代浏览器中的变体应该有效：

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13; http://jsfiddle.net/nnw7xza2/1/

点击演示here！

Answer 2

用它来计算： -css3 -html5 -javascript计时器

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

享受

Answer 3

如果您正在寻找一种易于理解的方法，请查看Basecacti。当然，截至目前，Basecacti不包括将背景嵌入到您自己的html页面中，所以只需查看它背后的源代码即可。以下是您需要的示例：

http://localhost/myapp/storage/defaults/test/file.png

要使此功能正常，请将3种不同的颜色定义为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);，clr1和clr2。然后将速度变量设置为clr3 2秒，它应该可以工作。（在上面的代码中定义这些值的renderColors函数是Basecacti用来获取用户从不同网页定义的颜色的内容。）此外，Basecacti现在是开源的，所以你可能想快点到他们的网站，尽快得到这个代码。如果您只想在2秒后更改背景，请将功能从2000更改为setInterval，但不要更改其他任何内容。如果Basecacti网站关闭或停止工作，或者我的代码中有错误，请对此帖发表评论。

javascript css3每2秒更改一次背景颜色

3 个答案: