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

Question

我已經在幾個Wordpress主題中看到了此功能，例如頁腳的背景會慢慢改變其顏色，而我一直想知道是否有一個簡單的技巧可以做到這一點。 （這可能是用jquery完成的？還是可以用純CSS完成？）

基本上，背景顏色從一種顏色逐漸過渡到另一種顏色（例如，粉紅色到藍色，藍色到紅色，紅色到粉紅色）並保持無限循環。 它不需要任何操作（例如，懸停或單擊），它就可以完成它的工作。 :)

是否有捷徑可尋？ 如果是這樣，希望通過示例代碼查看執行此操作的最佳方法。

提前非常感謝您。

Answer 1

您無需在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動畫，該動畫更改了塊的顏色。

不客氣:)可以問我一件事。

Answer 2

像這樣嗎？

<!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>

Answer 3

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

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

問題描述

3 個解決方案

解決方案1
5 已采納 2016-02-13 07:13:14

解決方案2
0 2016-02-13 07:08:25

解決方案3
0 2016-02-13 07:47:29

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

問題描述

3 個解決方案

解決方案1 5 已采納 2016-02-13 07:13:14

解決方案2 0 2016-02-13 07:08:25

解決方案3 0 2016-02-13 07:47:29

解決方案1
5 已采納 2016-02-13 07:13:14

解決方案2
0 2016-02-13 07:08:25

解決方案3
0 2016-02-13 07:47:29