css改變顏色與js的順利

我有一個js代碼，它改變了CSS的顏色，但我的問題是，我不想平穩地改變顏色。css改變顏色與js的順利

HTML：

<html id="html">

這裏是CSS：

html{ 
    background:radial-gradient(circle, #ffffff, #aaaaaa); 
    transition:all 5s linear; 
}

並且那是簡單的JS：

function changecolor(r,g,b){ 
    var bg = document.getElementById("html"); 
    bg.style.backgroundImage = 'radial-gradient(circle, #ffffff, #'+r+g+b+ ')'; 
};

在代碼中某處

然後：

changecolor(9,0,0);

顏色完全改變，但轉換不起作用。就像我之前說過的，我希望顏色能夠平滑地變化。

任何人都可以幫助我嗎？謝謝！

來源

2016-07-24 Kamil

[使用漸變背景使用CSS3轉換]（http://stackoverflow.com/questions/6542212/use-css3-transitions-with-gradient-backgrounds） – Arnauld

我相信使用JavaScript來設置CSS意味着transition被繞過。我建議使用JavaScript來設置class，然後用CSS來管理風格：

function changecolor(r,g,b){ 
    var bg = document.getElementById("html"); 
    bg.className = "alt-bg"; 
};

CSS：

.alt-bg { 
    background-image: styles-here; 
}

注：這並沒有考慮到通過變量的設置顏色，這取決於您的具體需求，這是否適合您。國際海事組織最好添加/刪除班級，並找出一種方法，如果可能的話，讓顏色在其他地方變化。

來源

2016-07-24 12:43:34 Toby

css改變顏色與js的順利

回答

相關問題