背景颜色变化瓷砖
这只是一些有关snipets代码的理论问题。 我想创建一个背景充满瓷砖的网站，颜色和形状不断变化。 Windows Phone 8磁贴就是一个很好的例子。 当然，后面我想创建一个更复杂的效果，但是我想知道如何改变每个50x50像素的方格。
这是一个代码snipet不断改变背景颜色。
.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的“随机重复”功能？ 注意：瓷砖应该以开始的颜色随机化。
谢谢！
当然有更好的方法（因为当你发现你自己重复代码的时候通常是这样）。
为动画效果使用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>