javascript css3每2秒更改一次背景顏色

Question

如何每2秒自動更改HTML背景顏色？ HTML5和CSS3淡入或淡出？

我試圖將過渡與計時器和CSS目標一起使用，但未成功

input[type=checkbox] {
   position: absolute;
   top: -9999px;
   left: -9999px;
}

label {
     display: block;
     background: #08C;
     padding: 5px;
     border: 1px solid rgba(0,0,0,.1);
     border-radius: 2px;
     color: white;
     font-weight: bold;
}

input[type=checkbox]:checked ~ .to-be-changed {
    color: red;
}

Answer 1

一些更改如果您事先知道顏色和顏色數量，則可以在現代瀏覽器中進行此更改 ：

 .animate-me { -webkit-animation: bgcolorchange 4s infinite; /* Chrome, Safari, Opera */ animation: 4s infinite bgcolorchange; } @keyframes bgcolorchange { 0% { background-color: red; } 25% { background-color: green; } 50% { background-color: yellow; } 75% { background-color: yellow; } 100% { background-color: red; } } /* Chrome, Safari, Opera */ @-webkit-keyframes bgcolorchange { 0% {background: red;} 25% {background: yellow;} 75% {background: green;} 100% {background: blue;} } 

 <div class="animate-me">Trippy! Give me a headache!</div> 

http://jsfiddle.net/nnw7xza2/1/

單擊此處演示！

Answer 2

用-css3 -html5 -javascript timer進行計算

 var arrColor = ["#45c1bf", "#f0593e", "#aeacd4", "#bdd630", "#4479bd", "#f5b11e"]; var footer = document.getElementById("footer"); var header = document.getElementById("header"); //helper function - get dark or lighter color function LightenDarkenColor(col, amt) { var usePound = false; if (col[0] == "#") { col = col.slice(1); usePound = true; } var num = parseInt(col, 16); var r = (num >> 16) + amt; if (r > 255) r = 255; else if (r < 0) r = 0; var b = ((num >> 8) & 0x00FF) + amt; if (b > 255) b = 255; else if (b < 0) b = 0; var g = (num & 0x0000FF) + amt; if (g > 255) g = 255; else if (g < 0) g = 0; return (usePound ? "#" : "") + (g | (b << 8) | (r << 16)).toString(16); } //random new color function GetNewColor() { var index = Math.floor((Math.random() * 5) + 1); return arrColor[index]; } // set new color function SetNewColor(color) { document.body.style.background = color; var NewColor = LightenDarkenColor(color, -20); footer.style.backgroundColor = NewColor; header.style.backgroundColor = NewColor; //footer.style.opacity = 1.2; } // on document load function start (function() { var colorSelected = GetNewColor(); SetNewColor(colorSelected); })(); //change color timer window.setInterval(function() { var colorSelected = GetNewColor(); SetNewColor(colorSelected); }, 2000); 

 * { margin: 0; padding: 0; } body { background: #bdd630; transition: background-color 0.5s ease; color: #fff; } #header { background: #000; height: 40px; text-align: center; } #content { /* Now, to activate scrollbars and compensate #footer height: */ padding-bottom: 40px; } #footer { background: #000; position: fixed; bottom: 0px; width: 100%; /* cause of fixed pos */ height: 40px; text-align: center; } 

 <div id="header">header</div> <div id="content"> <p>content here</p> </div> <div id="footer">footer</div> 

請享用

Answer 3

如果您正在尋找一種易於理解的方法，請查看Basecacti 。 當然，到目前為止，Basecacti還不包括將背景嵌入到您自己的html頁面中，因此只需查看其背后的源代碼即可。 如果需要，請參見以下示例：

var clr1 = renderColors("clr1");
    var clr2 = renderColors("clr2");
    var clr3 = renderColors("clr3");
    var speed = renderColors("speed");

    var deb = document.body;
    var circle = 0;
    deb.style.backgroundColor = clr1;

    setInterval(function(){
        if (circle == 0) {
            deb.style.backgroundColor = clr2;
            circle = 1;
        }
        else if (circle == 1) {
            deb.style.backgroundColor = clr3;
            circle = 2;
        }
        else {
            deb.style.backgroundColor = clr1;
            circle = 0;
        }
    }, speed);

為了使您clr1 ，請定義3種不同的顏色，如clr1 ， clr2和clr3 。 然后將速度變量設置為2000 2秒鍾，它應該可以工作。 （在上面的代碼中定義這些值的renderColors函數是Basecacti用來從用戶從另一個網頁獲取顏色的功能。）而且，Basecacti目前是開放源代碼，因此您可能想快點轉到他們的網站並盡快獲取此代碼。 如果僅希望背景在2秒后更改一次，請將函數從setInterval更改為setTimeout ，但不要進行任何其他更改。 如果Basecacti網站關閉或停止工作，或者代碼中有錯誤，請對此帖子發表評論。