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

Question

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

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

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

Answer 1

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

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

Answer 3

这里有一个 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>

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

Change background color every 30s (fade transition)

css

background

colors

fade

css-transitions