自動更改背景顏色循環（jQuery/css？）

我在幾個WordPress主題中看到了這個功能，例如頁腳的背景慢慢改變了它的顏色，我一直想知道是否有一個簡單的技巧去做這個。（這可能是用jQuery完成的？或者可以用純CSS完成？）自動更改背景顏色循環（jQuery/css？）

基本上，背景顏色逐漸從一種顏色過渡到另一種顏色（例如粉紅色到藍色，藍色到紅色，紅色到粉紅色）和停留在無限循環中。它不需要任何操作，如懸停或點擊，它只是做它的事情。 :)

有沒有一種簡單的方法來做到這一點？如果是這樣，希望看到用示例代碼完成此操作的最佳方法。

非常感謝你提前。

來源

2016-02-13 TimVanGorp

嘗試使用@keyframes的Google搜索，它可以通過純CSS實現。 –

我不知道css有這個選項。非常感謝你@VaibhavBhanushali祝你有美好的一天！ :) – TimVanGorp

你不需要在jQuery中製作這個技巧。你可以使用簡單的CSS動畫，而且它會更具有性能和簡單。

這是我的榜樣

我們佈局的

<div class="block"></div>

CSS樣式

html, body { 
    width: 100%; 
    height: 100%; 
    } 

@keyframes color-animation { 
    0% { 
     background: #ad1457; 
    } 
    50% { 
     background: #6a1b9a; 
    } 
    100% { 
     background: #bbdefb 
    } 
} 

.block { 
    width: 100%; 
    height: 100%; 
    animation: color-animation 3s infinite linear alternate; 
}

在這段代碼中，我們創建了簡單的css animation，它改變我們的塊的顏色。

不客氣:)如果你願意，你可以問我一些問題嗎？

來源

2016-02-13 07:13:14

我不知道css有這個選項，謝謝你的建議@Borisov有一個美好的一天！ – TimVanGorp

對不起，我爲它增加了一些例子。 –

謝謝鮑裏索夫，你是最棒的！ – TimVanGorp

這樣的事情？

<!DOCTYPE html> 
<link href='https://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'> 
<div style="height:150px"> 
    <div> 
     <h1 id="heading"><center>That's how i change color!!</center></h1> 
    </div> 
    <br><br> 
    <div class="bordered" id="fancy"> 
     <center>I behave like a chameleon!!</center> 
    </div> 
    <div style="margin-top:10%; font-size:1em; font-weight:bold;">CSS + JS = AWESOME!!<br><br>Code By Punit gajjar</div> 
</div> 
<script> 
    var myArray = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F']; 
setInterval(function() { 
    var rand = myArray[Math.round(Math.random() * (myArray.length - 1))]; 
    var rand1 = myArray[Math.round(Math.random() * (myArray.length - 1))]; 
    var rand2 = myArray[Math.round(Math.random() * (myArray.length - 1))]; 
    var rand3 = myArray[Math.round(Math.random() * (myArray.length - 1))]; 
    var rand4 = myArray[Math.round(Math.random() * (myArray.length - 1))]; 
    var rand5 = myArray[Math.round(Math.random() * (myArray.length - 1))]; 
    document.getElementById("fancy").style.background= '#'+rand+rand2+rand3+rand1+rand5+rand4; 
    document.body.style.background= '#'+rand+rand1+rand2+rand3+rand4+rand5; 
    setTimeout(function() { 
     var rand = myArray[Math.round(Math.random() * (myArray.length - 1))]; 
     var rand1 = myArray[Math.round(Math.random() * (myArray.length - 1))]; 
     var rand2 = myArray[Math.round(Math.random() * (myArray.length - 1))]; 
     var rand3 = myArray[Math.round(Math.random() * (myArray.length - 1))]; 
     var rand4 = myArray[Math.round(Math.random() * (myArray.length - 1))]; 
     var rand5 = myArray[Math.round(Math.random() * (myArray.length - 1))]; 
     document.getElementById("fancy").style.background= '#'+rand+rand2+rand1+rand3+rand5+rand4; 
     document.body.style.background= '#'+rand+rand1+rand3+rand2+rand4+rand5; 
    }, 1000); 
}, 1000); 
</script>

來源

2016-02-13 07:08:25

非常感謝您的回答Punit。祝你有美好的一天！ :) – TimVanGorp

$("body").css("transition","all 3s"); 
var arr = ["#f00","#0f0","#00f"]; 
function changeColor(){ 
    $("body").css({ 
     backgroundColor : arr[parseInt(Math.random() * 3)] 
     }); 
} 
changeColor(); 
setInterval(changeColor,3000);

來源

2016-02-13 07:47:29 Sandeep

雖然同意@timvangorp！可以用關鍵幀完成:) – Sandeep

自動更改背景顏色循環（jQuery/css？）

回答

相關問題