每 30 秒更改一次背景颜色（淡入淡出过渡）答案

【问题标题】：Change background color every 30s (fade transition)每 30 秒更改一次背景颜色（淡入淡出过渡）
【发布时间】：2015-03-02 05:05:57
【问题描述】：

我希望有人告诉我，使网页背景颜色（整个页面的背景颜色）每 30 秒更改一次（淡入淡出过渡）到给定颜色种类的代码是什么。简单吗？我想css会让它更容易吗？

我在互联网上进行了搜索，但只找到了我不想要的渐变。先感谢您。我搜索了 codepen 和 jsfiffle 的例子，但没有人有这么简单的东西：/

示例：在浏览我的页面时，我希望背景颜色从蓝色变为绿色，然后变为橙色，再变为蓝色，依此类推...... :)

【问题讨论】：

使用background-color 定义类，添加类似transition: background-color 1000ms linear; 的转换，并使用JavaScript 添加/删除这些类。
添加了，但是我如何实现淡入淡出效果？您还可以更具体地了解 Javascript 吗？为什么要使用 js？如果我在我的 html 页面中调用一个类并保持原样，那会不会更简单？
是的，你也许可以使用 css 动画来做到这一点
谢谢，但我找到了答案（如下）。祝你有美好的一天。

标签： css colors background css-transitions fade

【解决方案1】：

类似this fiddle

CSS：

body {
    background: blue; /* Initial background */
    transition: background .5s; /* .5s how long transitions shoould take */
}

Javascript：

var colors = ['green', 'orange', 'blue']; // Define Your colors here, can be html name of color, hex, rgb or anything what You can use in CSS
var active = 0;
setInterval(function(){
    document.querySelector('body').style.background = colors[active];
    active++;
    if (active == colors.length) active = 0;
}, 30000);

【讨论】：

干得好我的朋友 :) 非常感谢你的实际帮助 :)
我可以控制颜色在开始变化之前保持多长时间吗？
@Billef32 30000 控制更改间隔
30000 是毫秒？我的意思是我可以把像 15s 这样的东西作为一个值吗？还是我应该添加过渡延迟？我在 css 中添加了过渡延迟，但它不起作用。
如何更改代码以使计数从数组中的颜色开始，并且没有初始颜色？或者在您的示例中，要显示的第一种颜色将是数组中的绿色而不是蓝色。请问我该怎么做？

【解决方案2】：

也可以完全不使用任何 JavaScript，使用 CSS3 动画来做到这一点。

html,
body {
  height: 100%;
}

body {
  -webkit-animation: background 5s cubic-bezier(1,0,0,1) infinite;
  animation: background 5s cubic-bezier(1,0,0,1) infinite;  
}


@-webkit-keyframes background {
  0% { background-color: #f99; }
  33% { background-color: #9f9; }  
  67% { background-color: #99f; }
  100% { background-color: #f99; }
}

@keyframes background {
  0% { background-color: #f99; }
  33% { background-color: #9f9; }  
  67% { background-color: #99f; }
  100% { background-color: #f99; }
}

【讨论】：

感谢您的代码。我看到它运行得非常快，即使时间设置为 5 秒。为什么会这样？ :)
这是动画的总时间，所以需要 5 秒除以 3，所以每个颜色大约需要 1.5 秒。贝塞尔函数处理渐变，如果您需要对此进行更多控制，可以复制关键帧内的背景颜色（例如，为#f99 添加 30%）

【解决方案3】：

这是一个 jQuery 方法，用于完成 Bogdan 的回答，它采用 3 个参数：selector（例如，“.container”或“div”）、colors（可在其间切换的颜色数组）和 @987654323 @（控制 bgd 颜色变化的频率）。我将它设置为 3 秒 (3000)，以便您可以更轻松地看到它，但您可以将其增加到 30000（30 秒）。

jQuery(function ($) {
    function changeColor(selector, colors, time) {
        /* Params:
         * selector: string,
         * colors: array of color strings,
         * every: integer (in mili-seconds)
         */
        var curCol = 0,
            timer = setInterval(function () {
                if (curCol === colors.length) curCol = 0;
                $(selector).css("background-color", colors[curCol]);
                curCol++;
            }, time);
    }
    $(window).load(function () {
        changeColor(".container", ["green", "yellow", "blue", "red"], 3000);
    });
});

.container {
    background-color: red;
    height:500px;
    -webkit-transition: background-color 0.5s ease-in-out;
    -moz-transition: background-color 0.5s ease-in-out;
    -o-transition: background-color 0.5s ease-in-out;
    -khtml-transition: background-color 0.5s ease-in-out;
    transition: background-color 0.5s ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container"></div>

【讨论】：

非常好！！确实:)我希望这篇文章能帮助其他寻找类似东西的人:)