如何每 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 中使用脈動背景顏色的樂趣。