自动更改背景颜色循环（jQuery/css？）
Posted
技术标签:
【中文标题】自动更改背景颜色循环（jQuery/css？）【英文标题】：Automatic changing background color loop (jQuery/css?) 【发布时间】：2016-05-24 10:58:31 【问题描述】：我在几个 Wordpress 主题中看到了这个功能，例如页脚的背景会慢慢改变它的颜色，我一直想知道是否有一个简单的技巧可以做到这一点。 （这大概是用jquery做的吧？还是可以用纯css做的？）
基本上，背景颜色会逐渐从一种颜色过渡到另一种颜色（例如粉红色到蓝色，蓝色到红色，红色到粉红色）并保持无限循环。它不需要任何操作，例如悬停或单击，它只是做它的事情。 :)
有没有简单的方法来做到这一点？如果是这样，希望看到使用示例代码执行此操作的最佳方法。
非常感谢您。
【问题讨论】：
尝试谷歌搜索@keyframes，可以通过纯CSS实现。 我不知道 css 有这个选项。非常感谢@VaibhavBhanushali 祝您有美好的一天！ :) 【参考方案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 animation，它改变了我们块的颜色。
不客气 :) 如果你愿意，可以问我一些事情吗？
【讨论】：
我不知道 css 有这个选项，谢谢@Borisov 的建议，祝你有美好的一天！ 对不起，我添加了一些例子。 谢谢鲍里索夫，你是最棒的！【参考方案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>
【讨论】：
非常感谢您的回答 Punit。祝您有美好的一天！ :)【参考方案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);
【讨论】：
同意@timvangorp！可以用关键帧完成:)以上是关于自动更改背景颜色循环（jQuery/css？）的主要内容，如果未能解决你的问题，请参考以下文章