Javascript 如何每n秒更改一次背景色？

所以前一段时间，我想我在一些网站上看到了一种在不同背景颜色之间转换的效果（改变背景颜色）

颜色每2-3秒就会改变一次

过渡也相当顺利。我觉得很酷

我正在重新设计我的服务网站，并希望添加到我的网站效果

有两个变量需要控制：时间和颜色

另外，我不想让任何人帮我写代码，但请你给我一些链接，我可以在那里找到这个效果

---

如果你能告诉我这个效果的名称和它所在的库，那就太好了

要在定义的时间间隔内更改网站背景颜色，您可以按照下面的链接进行操作。

这里给出了一个完整的源代码示例。

这里展示了一些@keyframes与js组合，通过单击来减慢计时。希望有帮助

.body {
    width: 100%;
    height: 1000px;
    animation-name: colorChange;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    text-align: center;
}

@keyframes colorChange {
    0% {
        background: red;    
    }
    20% {
        background: blue;    
    }
    40% {
        background: green;    
    }
    60% {
        background: orange;    
    }
    80% {
        background: purple;    
    }
    100% {
        background: red;    
    }
}

.button {
    padding: 10px;
    margin-top: 40px;
    font-size: 20px;
}

---

---

编辑 添加了代码片段

$（.button”）。在（“单击”上，函数（）{
$（“.body”）.css（“动画持续时间”，“20秒”）
})

.body{
宽度：100%；
高度：1000px；
动画名称：色彩变化；
动画持续时间：10秒；
动画迭代次数：无限；
文本对齐：居中；
}
@关键帧颜色更改{
0% {
背景：红色；
}
20% {
背景：蓝色；
}
40% {
背景：绿色；
}
60% {
背景：橙色；
}
80% {
背景：紫色；
}
100% {
背景：红色；
}
}
.按钮{
填充：10px；
边缘顶端：40px；
字体大小：20px；
}

改变时间

您可以使用CSS3动画关键帧执行此操作

---

看看这个。

谷歌css背景色动画也请看。谢谢这是最好、最简单的解决方案。但是，我在计算转换之间的时间上遇到了一个问题。JS函数中的动画持续时间参数似乎不起作用，因为我一直在使用它来更改时间值，但它对动画的时间没有任何影响。我似乎改变两种颜色之间转换时间的唯一方法是更改css（我增加任意两种颜色之间的百分比。）这是可行的，但它只允许我在动画中使用较少的颜色。我想添加更多颜色。非常欢迎。这是一个更新版本，可以更彻底地解决更改时间的问题。我还添加了一个按钮，可以在单击事件中解决更改颜色的问题。这有助于解决您的问题吗？是的！不需要这些按钮尽管我希望在我的网站背景中添加此功能！非常感谢！：d如果您认为我的问题是真实的，并且符合stackoverflow标准，您可以投票支持我的问题。需要稍微提高我的声誉！：）我该开始学习CSS3了。原来解决方案是使用动画关键帧！谢谢你，伙计如果你认为这是一个符合标准的有效问题，你能投票支持我的问题吗？谢谢。：）这不管用。然而，我找到了一个动画关键帧的解决方案！非常感谢：）

$( ".button" ).on( "click", function () {
    $( ".body" ).css( "animation-duration", "20s" ) 
})