页面加载时平滑的颜色过渡

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

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

1. 获取元素

   var my_div = document.getElementById("box1");

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