Question

我有一个html div，希望背景颜色慢慢淡出所有颜色。示例：div从＃000000开始然后转到＃000001然后转到..02，..03，直到它到达#ffffff

这是我到目前为止的代码

HTML：

<body>
   <div>

   </div>
</body>

CSS：

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

另外，我怎么能让它停在不同的颜色，如＃001100

Answer 1

我在我制作的网站上做了类似的事情。

//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];
    }
}

Answer 2

下面是将生成HTML页面中所有可能颜色的脚本

循环非常繁重，因此需要一段时间才能执行，您可以根据需要更改循环参数

我用不同的div显示输出，每个div有不同的颜色

这些div是动态创建的，高度可以用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>

淡出色彩

2 个答案: