每30秒更改背景颜色(淡入淡出) [英] Change background color every 30s (fade transition)

问题描述

我希望有人告诉我，使网页背景颜色(整个页面的背景颜色)每30秒更改一次(淡入淡出)为给定颜色的代码是什么.简单吗?我想CSS会更容易吗?

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?

我已经在互联网上进行搜索，但只发现了我所不想要的渐变.先感谢您.我已经搜索了codepen和jsfiffle的示例，但是没有人有这么简单的东西:/

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 :/

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

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

推荐答案

下面是一种jQuery方法，用于完成Bogdan的答案，该方法采用3个参数:selector(例如，.container"或"div")，(在其间切换的颜色数组)和time(控制bgd颜色改变的频率). 我将其设置为3秒(3000)，这样您可以更轻松地看到它的运行状态，但是可以将其增加到30000(30秒).

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(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秒更改背景颜色(淡入淡出)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！