如何每n秒钟更换背景色？

Question

所以，一段时间前，我想我看到了一个在不同背景颜色(改变背景色)之间转换的网站的效果。

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

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

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

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

不试图让任何人为我编写代码，但请您给我提供一些链接，在那里我可以找到这个效果。

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

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中使用脉冲背景色有趣。