CSS 每 30 秒更改一次背景颜色（淡入淡出过渡）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27766343/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change background color every 30s (fade transition)
提问by Billef32
I would like someone to tell me what's the code for making a webpage background color (the background color of the whole page) to change (fade transition) every 30s to a given color variety. Is it simple? I guess css will make it easier?
我希望有人告诉我使网页背景颜色（整个页面的背景颜色）每 30 秒更改一次（淡入淡出过渡）到给定颜色种类的代码是什么。简单吗？我想 css 会让它更容易吗？
I've searched over the internet and I only found gradients which is not what I want. Thank you in advance. I 've search codepen and jsfiffle for examples but no one had something that simple :/
我在互联网上搜索过，我只找到了不是我想要的渐变。先感谢您。我已经在 codepen 和 jsfiffle 中搜索示例，但没有人有这么简单的东西：/
Example: While browsing my page I want the background color to change from blue to green and then to orange and again blue and so on so on... :)
示例：在浏览我的页面时，我希望背景颜色从蓝色变为绿色，然后变为橙色，再变为蓝色，依此类推... :)
采纳答案by Marventus
Here's a jQuery approach, to complete Bogdan's answer, that takes 3 parameters: selector(example, ".container" or "div"), colors(an array of colors to switch in between) and time(controls how frequently the bgd color changes).
I set it for 3 seconds (3000) so you can see it in action easier, but you can increase it to 30000 (30 seconds).
这是一种 jQuery 方法，用于完成 Bogdan 的回答，它需要 3 个参数：（selector例如，“.container”或“div”）、colors（要在两者之间切换的颜色数组）和time（控制 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>回答by ckuijjer
It's also possible to do this without any JavaScript at all, using CSS3 animations.
也可以完全不使用任何 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; }
}回答by Bogdan Ku?tan
Something like this fiddle
像这个小提琴一样的东西
CSS:
CSS：
body {
background: blue; /* Initial background */
transition: background .5s; /* .5s how long transitions shoould take */
}
Javascript:
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);
