Javascript 如何制作变色背景？

所以，我知道这可能是一个很容易解决的问题，但无论如何

---

我正在尝试将其设置为可以更改网页背景颜色的位置，顺序如下：

red > yellow > green > blue > purple > pink > brown > red

单击此处可获得一个网页的演示，该演示完成了我试图为我的网页所做的操作

---

我想我可以在body元素上使用一些JavaScript：

var body=document.getElementById（'body'）；/*得到
id为“body”的元素*/
/*我需要一些javascript来制作“十六进制”
变量相应地更改，然后使用
参数作为十六进制代码的字符串，用于更改
背景色*/
函数setColor（十六进制）{
setAttribute（“bgcolor”，十六进制）；/*设置
将bgcolor属性指定给计数器变量*/
}

您不需要使用JavaScript来实现此效果。使用CSS动画，您可以创建自己的时髦背景

.background

获取名为animation的属性，该属性的名称（在本例中为

bg animation

）可循环（并淡出）所有颜色。您可以在

@关键帧中指定动画本身。动画时间设置为10秒，或
10s
，可以是任何内容

阅读有关
动画的更多信息


.background{
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
动画：bg动画10s无限；
}
@-webkit关键帧bg动画{
0% {
背景色：红色；
}
15% {
背景颜色：黄色；
}
30% {
背景颜色：绿色；
}
45% {
背景颜色：蓝色；
}
60% {
背景颜色：紫色；
}
75% {
背景颜色：粉红色；
}
90% {
背景颜色：棕色；
}
100% {
背景色：红色；
}
}
@关键帧bg动画{
0% {
背景色：红色；
}
15% {
背景颜色：黄色；
}
30% {
背景颜色：绿色；
}
45% {
背景颜色：蓝色；
}
60% {
背景颜色：紫色；
}
75% {
背景颜色：粉红色；
}
90% {
背景颜色：棕色；
}
100% {
背景色：红色；
}
}
使用方法，在回调中随机生成颜色并更新背景。可以在使用属性更改颜色时提供过渡。可以借助、和方法随机生成颜色代码

如果要在颜色代码数组之间进行更改，请使用带有计数器变量的数组


setInterval（函数（）{
document.body.style.backgroundColor='#'+Math.floor（Math.random（）*16777215）.toString（16）；
}，2000）
正文{
背景：红色；
-webkit过渡：背景色2000ms线性；
-moz过渡：背景色2000ms线性；
-o过渡：背景色2000ms线性；
-ms过渡：背景色2000ms线性；
过渡：背景色2000ms线性；
}
这将是我的方法，使用javascript。当使用javascript时，Setinterval是一种方法。这真的很奇怪。当我移动鼠标时，输出效果非常平滑，但是当我的鼠标静止时，没有褪色，并且非常不平滑。这种方法写起来有点长，但它可以工作！谢谢@BenStafford您可以通过使用Sass函数或Mixin来简化它。我在这个网站上从未见过如此催眠的输出%-）