javascript - 淡出颜色

标签 javascript html css

<分区>


这个问题是由于错别字或无法再重现的问题引起的。虽然类似的问题可能是on-topic在这里,这个问题的解决方式不太可能帮助 future 的读者。

关闭 9 年前

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

这是我目前的代码

HTML:

<body>
   <div>

   </div>
</body>

CSS:

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

还有我怎样才能让它停在不同的颜色,比如#001100

最佳答案

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

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

关于javascript - 淡出颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21153307/

上一篇:html - 我无法在 Chrome 中将两个输入对齐,不在同一行

下一篇:html - 将分页扩展到全宽?

相关文章:

html - 我如何使用 css3 实现它?

css - 分区定位

html - 如何使子 div 与较小的父 div 居中

css - 如何在空 DIV 上创建链接?

Javascript 将属性拆分为对象排除在字符串中

javascript - 从javascript中的google登录获取所有用户的联系人列表(包括电话号码)

javascript - 具有空数组的 JSON 对象 - Javascript

javascript - Vue Typescript 组件库 - 使用 Webpack 和 SASS

css - 修改 CSS 换行后的行为

css - 如何在 CSS 中第二次单击时失去焦点超链接