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

Question

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

颜色每 2-3 秒改变一次。

过渡也非常顺利。 我发现它很酷。

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

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

PS 不想让任何人为我编写代码，但能否请您参考一些链接，我可以在其中找到有关此效果的信息。

如果您能告诉我此效果的名称以及它所在的库，那就太好了。

Answer 1

这是JS Fiddle ，它向您展示了一些 @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" ).on( "click", function () {
    $( ".body" ).css( "animation-duration", "20s" ) 
})

---

编辑添加的片段。

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

 .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; }

 <div class="body"> <button class="button">Change Timing</button> </div>

Answer 2

要在定义的时间间隔内更改您的网站背景颜色，您可以点击以下链接。 http://www.cakephpexample.com/html/add-gradient-effect-to-your-website-by-javascript/

其中一个完整的示例与源代码一起给出。

Answer 3

您可以使用 CSS3 动画关键帧来实现。

看看这个在 CSS3 中使用脉动背景颜色的乐趣。