背景颜色变化的瓷砖

Question

这更像是一个包含一些代码片段的理论问题。我想创建一个背景充满颜色和形状不断变化的瓷砖的网站。一个很好的例子是 Windows Phone 8 磁贴。当然，稍后我想创建一个更复杂的效果，但我想知道您将如何单独更改每个 50x50 像素的正方形。

这是一个不断改变背景颜色的代码片段。

.animate {
    height: 200px;
    width: 400px;
    border: 1px solid #000;
    -webkit-animation: animate_bg 5s;
    animation: animate_bg 5s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

@keyframes animate_bg {
    0%   {background:red;}
    50%  {background:green;}
    100% {background:blue;}
}

@keyframes animate_bg {
    0%   {background:red;}
    50%  {background:green;}
    100% {background:blue;}
}

@-webkit-keyframes animate_bg {
    0%   {background:red;}
    50%  {background:green;}
    100% {background:blue;}
}

现在我需要一次又一次地创建这种效果，直到它填满我的页面，还是有更好的方法？也许有一个类似于 bg-repeat 的“随机重复”功能？注意：瓷砖的起始颜色应该是随机的。

谢谢！

Answer 1

当然有更好的方法（当您发现自己重复代码时通常会出现这种情况）。

对动画效果使用 CSS 过渡，定义许多类 - 每个类都有不同的颜色，并使用 JavaScript 随机分配它们。

这是一个简单的例子，展示了我在上面写的内容。它支持无限数量的瓷砖和颜色。

var tiles = document.getElementsByClassName('tile');
var totalTypes = 5;
var interval = 1000;

function paintTiles() {
  for (var i = 0; i < tiles.length; i++) {
    tiles[i].className = 'tile'; // reset classes
    tiles[i].classList.add('type' + Math.ceil(Math.random() * totalTypes));
  }
}
paintTiles(); // initial paint
setInterval(paintTiles, interval); // paint afterwards

.tile {
  display: inline-block;
  width: 50px;
  height: 50px;
  border: 1px solid black;
  transition: 1s all linear;
}

.type1 {
  background: red;
}

.type2 {
  background: blue;
}

.type3 {
  background: green;
}

.type4 {
  background: yellow;
}

.type5 {
  background: chucknorris; 
  /*  
  :)
  inspired by: http://stackoverflow.com/questions/8318911/why-does-html-think-chucknorris-is-a-color
  */
}

<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<br>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>

---

更新

好的，这里是使用 JS 动态添加图块，尽管从服务器端执行此操作可能是一个更好的主意。当然，你可以控制你想要多少个tile，我以10个为例。

var totalTiles = 10;
var tiles = [];
var totalTypes = 5;
var interval = 1000;


function addTiles() {
  for (var i = 0; i < totalTiles; i++) {
    var div = document.createElement('div');
    div.className = 'tile';
    div.classList.add('type' + Math.ceil(Math.random() * totalTypes));
    document.body.appendChild(div);
  }
  tiles = document.getElementsByClassName('tile');
}

function paintTiles() {
  for (var i = 0; i < tiles.length; i++) {
    tiles[i].className = 'tile'; // reset classes
    tiles[i].classList.add('type' + Math.ceil(Math.random() * totalTypes));
  }
}
paintTiles(); // initial paint
setInterval(paintTiles, interval); // paint afterwards

.tile {
  display: inline-block;
  width: 50px;
  height: 50px;
  border: 1px solid black;
  transition: 1s all linear;
}

.type1 {
  background: red;
}

.type2 {
  background: blue;
}

.type3 {
  background: green;
}

.type4 {
  background: yellow;
}

.type5 {
  background: chucknorris; 
  /*  
  :)
  inspired by: http://stackoverflow.com/questions/8318911/why-does-html-think-chucknorris-is-a-color
  */
}

<button onclick="addTiles()">Add 10 Tiles</button><br />