緩慢變色背景

Question

我需要在網站上做一個背景慢慢改變顏色，所以不斷從紅色，綠色，藍色，回到紅色。有沒有與jQuery或JavaScript的方式來做到這一點？ 感謝

Answer 1

var color = "red"  
setInterval(function() { 
    if(color == "red") { 
     $('body').stop().animate({backgroundColor: "green"}, 2000); 
     color = "green"; 
    } else if(color == "green") { 
     $('body').stop().animate({backgroundColor: "blue"}, 2000); 
     color = "blue"; 
    } else if(color == "blue") { 
     $('body').stop().animate({backgroundColor: "red"}, 2000); 
     color = "red"; 
    } 
}, 2500); 

Answer 2

對於簡單的動畫，你可以使用CSS：

body { 
    background-color: red; 
    -webkit-animation: changeBgColor 3s infinite; 
    -moz-animation:  changeBgColor 3s infinite; 
    -ms-animation:  changeBgColor 3s infinite; 
    -o-animation:  changeBgColor 3s infinite; 
    animation:   changeBgColor 3s infinite; 
}  

@-webkit-keyframes changeBgColor { 
    0% { 
    background-color: red; 
    } 
    25% { 
    background-color: green; 
    } 
    50% { 
    background-color: blue; 
    } 
    75% { 
    background-color: black; 
    } 
    100% { 
    background-color: red; 
    } 
} 

@-moz-keyframes changeBgColor { 
    0% { 
    background-color: red; 
    } 
    25% { 
    background-color: green; 
    } 
    50% { 
    background-color: blue; 
    } 
    75% { 
    background-color: black; 
    } 
    100% { 
    background-color: red; 
    } 
} 

@-o-keyframes changeBgColor { 
    0% { 
    background-color: red; 
    } 
    25% { 
    background-color: green; 
    } 
    50% { 
    background-color: blue; 
    } 
    75% { 
    background-color: black; 
    } 
    100% { 
    background-color: red; 
    } 
} 

@-ms-keyframes changeBgColor { 
    0% { 
    background-color: red; 
    } 
    25% { 
    background-color: green; 
    } 
    50% { 
    background-color: blue; 
    } 
    75% { 
    background-color: black; 
    } 
    100% { 
    background-color: red; 
    } 
} 

keyframes changeBgColor { 
    0% { 
    background-color: red; 
    } 
    25% { 
    background-color: green; 
    } 
    50% { 
    background-color: blue; 
    } 
    75% { 
    background-color: black; 
    } 
    100% { 
    background-color: red; 
    } 
} 

JS Bin Example