自动更改背景颜色循环（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？）

回答

相关问题