Question

我有三个div：

#box1 {
  margin-left: auto;
  margin-right: auto;
    background-color:#f1c40f;
text-align: center;
    }

  #box2{

  margin-left: auto;
  margin-right: auto;
    background-color:#f39c12;
text-align: center; 
  }

    #box3{

  margin-left: auto;
  margin-right: auto;
    background-color:#e67e22;
    text-align: center; 
  }

我希望他们的背景颜色过渡到一些随机颜色。高级伪代码将是这样的：

获取元素

var my_div = document.getElementById（＆＃34; box1＆＃34;）;

2。选择随机颜色（Random color generator in JavaScript）

function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

3。将div颜色慢慢地转换为新颜色 - 这个平滑过渡步骤让我最困惑

Answer 1

向css中的元素添加转换（指定属性，持续时间和类型）：

#box1 {
    margin-left: auto;
    margin-right: auto;
    background-color:#f1c40f;
    text-align: center;
    -webkit-transition: background-color 3s ease-in-out;
    -moz-transition: background-color 3s ease-in-out;
    -o-transition: background-color 3s ease-in-out;
    transition: background-color 3s ease-in-out;
    }

然后在页面加载时，获取所有框并更改其背景颜色：

window.onload = function() {
  var divs = document.getElementsByTagName("div");
  for (var i = 0; i < divs.length; i++) {
    divs[i].style.backgroundColor = getRandomColor();
  }
}

选中此plunker

页面加载时平滑的颜色转换

1 个答案: