javascript css3每2秒更改背景颜色 [英] javascript css3 change background color every 2 seconds

问题描述

如何每2秒自动更改HTML背景颜色？ HTML5 with CSS3 fade in or fadeout？

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

我试图使用计时器和CSS目标的转换，但没有成功

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

推荐答案

如果您事先知道颜色和颜色数量，则在现代浏览器中应用的变体应该可以使用：

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/

点击演示这里！

这篇关于javascript css3每2秒更改背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！