通過顏色淡入淡出

我有一個html div，並希望背景色可以慢慢淡入所有的顏色。例：DIV開始於＃000000，然後去＃000001，然後..02，..03直到它到達#FFFFFF通過顏色淡入淡出

這裏是我到目前爲止

HTML代碼：

<body> 
    <div> 

    </div> 
</body>

CSS：

div 
{ 
    height:100px; 
    width:100px; 
    background-color:#000000; 
}

此外，我怎麼能得到它停止在不同的顏色一樣＃001100

來源

2014-01-16 Qwertie

你意識到這是1600萬種顏色吧？整個過程需要一段時間才能完成，因爲如果要實際顯示所有這些參數，則必須以刷新率或更慢的頻率進行迭代。在慷慨的60赫茲，這是3.23天。 –

@JimGarrison哦，我沒有想到，會經歷每一個數字工作 – Qwertie

@qwertie只需製作一系列顏色並循環播放。過渡顏色，你會得到它們之間的顏色。 –

我在我製作的網站上做了這樣的事情。

//set interval for color change  
setInterval(function(){colorMate();},5000); 


//animate body background using color picker function 
function colorMate(){ 
      $('body').animate({backgroundColor: pickColor()},2000); 
     } 

//declare array of colors to be used when page loads 
var colors = ['#206BA4','#BBD9EE',' #EBF4FA','#C0C0C0','#E7E4D3','#F1EFE2','#52ADDA','#68B8DF','#DBDBDB','#AACD4B','#C5AE87']; 
var curcolor = 0; 

//picks random color from array, different from current one 
function pickColor(){ 
    var rand = Math.floor(Math.random() * 11); 
    if (rand == curcolor){ 
     pickColor(); 
    } 
    else { 
     curcolor = rand; 
     return colors[rand]; 
    } 
}

來源

2014-01-16 04:43:22 Seano666

這不工作對我來說這裏是一個鏈接http://jsfiddle.net/GtAyC/ – Qwertie

這是因爲你沒有添加jQuery和jQuery-UI，沒有正確修改jQuery選擇器，我也會移動Javascript到Javascript字段:) – Seano666

下面是將genrate所有可能的顏色在HTML頁面中的腳本

環路很重所以它需要時間來執行，你可以改變回路的參數按你方要求

我已顯示具有不同div的輸出，並且每個div的具有不同顏色的

被動態創建這些div的和高度widht可以與CSS

被改變

<html> 
    <head> 
    <style type='text/css'> 
    div{ 
     height:5px; 
     width:5px; 
     float:left; 
     } 
    </style> 
    </head> 

    <body id='main' style='width:100%:height:100%;'> 
    </body> 
     <script type='text/javascript'> 
     /* Loop's Start here */ 
          for(x=0;x<225;x++){ // changes the value the parameter to minminze the loop run 
           for(y=0;y<225;y++){       
            for(z=0;z<225;z++){ 
             element = document.createElement("div"); //creating dynamic div 
             element.id ='id_'+x+'_'+y+'_'+z; //assing id to newly created div 
             document.body.appendChild(element); // append div to main body 
             document.getElementById('id_'+x+'_'+y+'_'+z).style.background='rgb('+x+','+y+','+z+')'; //change the color of the div          
            } 
           } 
          } 
    </script> 
</html>

來源

2014-01-16 05:04:33 sanjeev

這實際上是他所要求的，但該循環只是可怕:) – Seano666

+1這實際上有一個很好的效果，雖然當我跑它時，我不想循環通過每種顏色所以我用（'x + = 10; y + = 10'和'z + = 10'）。 – jasonscript

通過顏色淡入淡出

回答

相關問題