每 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")、colors(要在它们之间切换的颜色数组)和 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屋！