css使用js平滑地改变颜色

css change color smoothly with js

本文关键字：改变 变颜色 平滑 使用 js css      更新时间：2023-09-26

我有一个js代码，它可以更改css颜色，但我的问题是，我不想平滑地更改颜色。

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

颜色变化很完美，但过渡不起作用。就像我之前说的，我希望颜色能顺利变化。

有人能帮我吗？谢谢

我认为使用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;
}

注意：这不考虑您通过变量设置颜色，这取决于您的具体需求是否适用。IMO最好添加/删除类，并找出一种方法，尽可能在其他地方使颜色可变。

相关文章：