Question

一段时间以后我觉得我看到某个网站上的效果在不同的背景颜色之间转换（改变背景颜色）。

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

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

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

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

P.S。不试图让任何人为我编写代码，但是请你转介一下我可以找到这个效果的链接。

如果您能告诉我这个效果的名称及其存在的库，那将会很棒。

Answer 1

这里的JS Fiddle向您展示了与js组合的@keyframes，以通过点击减慢时间。希望有所帮助！

.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" ) 
})

<强> 修改添加了代码段。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

使用源代码给出完整示例。

Answer 3

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

看看这个Fun With Pulsing Background Colors in CSS3。

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

3 个答案: