Question

我正在建立一个简单的网站，我希望背景从#FFFFFF过渡到＃000000然后回来，无休止地重复。有点像这样：http://i393.photobucket.com/albums/pp12/Cyzzaro/Hi5New/fondo/black-to-white.gif。我也希望能够设定变化发生的速度。

我可以使用GIF执行此操作，但有没有办法只使用HTML / CSS？

Answer 1

使用CSS3 动画

jsBin demo

body{
  background:#000;
  animation: pulsate 2s ease-in-out infinite;
}

@keyframes pulsate { /* You can add more % with more colors! */
  0% {background-color: black;}
  50% {background-color: white;}
  100% {background-color: black;}
}

或简单地说：

@keyframes pulsate {
  50% {background-color: white;}
}

P.S：您可能希望添加@-webkit-keyframes pulsate和其他 @-vendor- 特定前缀以获得更好的xBrowser支持

使用jQuery UI：如果你想要你可以使用jQuery和它的jQuery-UI插件库来实现它：

jsBin demo

var clr = ["#000", "#ddd", "red"], // You can add more colors!
    bgN = clr.length,
    bgC = 0 ;

(function loop(){
  $('body').animate({backgroundColor: clr[bgC++ % bgN]}, 1000, loop);
}());

P.S：需要jQuery UI，因为默认的jQuery .animate()不支持background-color动画。

使用CSS3 转换和jQuery：因为CSS3 animate 是自己启动的，所以与转换的情况不同，触发事件或者转换的更改状态你可以使用JS，在这种情况下我使用jQuery来切换元素 className

jsBin demo

body{
  background:#000;
  transition: 2s;
}
.white{
  background:#fff;
}

<!
setInterval(function(){
  $("body").toggleClass("white");
},2000);

从白色过渡到黑色并返回的背景

1 个答案: