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

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... :)

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

3 个解决方案

#1

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个参数:选择器(例如,“.container”或“div”),颜色(在两者之间切换的颜色数组)和时间(控制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>

#2

It's also possible to do this without any JavaScript at all, using CSS3 animations.

使用CSS3动画也可以在没有任何JavaScript的情况下完成此操作。

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; }
}

#3

Something like 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);

#1

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>

#2