如何讓背景逐漸變色？

我試圖製作一個網頁，圖像的背景顏色逐漸改變顏色。我知道如何改變Javascript中的某些東西的背景顏色，但我不知道如何「動畫」這樣說（不使用Flash）。如何讓背景逐漸變色？

2012-02-20 Isaiah Bugarin

您可以使用CSS轉換來獲得該效果。每次

-webkit-transition: all 1s ease-in-out; 
-moz-transition: all 1s ease-in-out; 
-o-transition: all 1s ease-in-out; 
-ms-transition: all 1s ease-in-out; 
transition: all 1s ease-in-out;

對於處理CSS的任何樣式值被改變了這一切的變化是動畫從當前至1秒的新價值：只需添加CSS代碼到從JS改變的元素。

它只適用於現代瀏覽器。看到一個例子：click

來源

2012-02-20 22:38:18 MarcinJuraszek

這真的很好。我只是用JS中的一組顏色來投射一個數組，並告訴它每隔幾秒從該數組中生成一個隨機顏色。謝謝！ – 2012-02-20 23:10:55

您可能需要使用setTimeout()功能：

function animateBg() 
{ 
    myElement.style.backgroundColor = someNewValue; 
    setTimeout(animateBg, 20); // 20 milliseconds 
}

，並調用animateBg（）在你的身體的onload處理。例如，<body onload="animateBg()">。

來源

2012-02-20 22:30:32

您也可以使用'的setInterval（）'功能（具有相同參數），這將使得「重新武裝」你的'animateBg（）'內'animateBg定時器（）'不必要（只需調用'setInterval（animateBg，20）'就可以每20毫秒調用一次'animateBg（）'函數 – 2012-02-20 22:32:32

無論採用哪種方法，您都需要添加一個'if'測試來決定是否繼續動畫，即測試（使用'setInterval（）'你需要一個額外的變量來保存對定時器id的引用，這樣你可以取消它，再加上'setTimeout（）'往往比''setInterval（）'關於如果用戶切換到另一個選項卡然後再回來會發生什麼。） – nnnnnn 2012-02-20 22:51:35

好點。我推測這是一個永恆的循環動畫出於某種原因。 – 2012-02-21 07:12:06

我會嘗試使用JQuery color plugin。看看例子here（點擊演示），它們看起來完全符合你的描述。

來源

2012-02-20 22:39:35 mck

這裏是如何動畫body標籤背景的例子：

function animateBg(i) { 
    document.body.style.backgroundColor = 'hsl(' + i + ', 100%, 50%)'; 

    setTimeout(function() { 
     animateBg(++i) 
    }, i); 
} 
animateBg(0);

請記住，HSL是不是跨瀏覽器，你也可以做六角/ RGB顏色的伎倆。

的jsfiddle鏈接：http://jsfiddle.net/euthg/

來源

2012-02-20 23:03:51

如何讓背景逐漸變色？

回答

相關問題