Javascript 背景变色瓷砖

这更像是一个理论问题，有几个代码片段。我想创建一个网站，背景是颜色和形状不断变化的瓷砖。Windows Phone 8互动程序就是一个很好的例子。当然，稍后我想创建一个更复杂的效果，但我想知道你将如何着手改变每个50x50px的正方形，例如

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

.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重复？注：瓷砖的起始颜色应随机化

---

谢谢大家!

当然有更好的方法（当您发现自己在重复代码时通常会这样做）

为动画效果使用CSS转换，定义许多类-每个类具有不同的颜色，并使用JavaScript随机分配它们

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

var tiles=document.getElementsByClassName（'tile'）；
var totalTypes=5；
var区间=1000；
函数paintTiles（）{
对于（变量i=0；i

.tile{
显示：内联块；
宽度：50px；
高度：50px；
边框：1px纯黑；
过渡：1s全线性；
}
.type1{
背景：红色；
}
.类型2{
背景：蓝色；
}
.类型3{
背景：绿色；
}
.类型4{
背景：黄色；
}
.type5{
背景：诺里斯；
/*  
:)
灵感来自：http://stackoverflow.com/questions/8318911/why-does-html-think-chucknorris-is-a-color
*/
}

因此，如果我要用瓷砖填充整个背景，是否需要复制/粘贴200次？难道没有更好的办法吗？当然有更好的办法。您可以使用JS或服务器端语言来生成它们。要我教你怎么做吗？如果不太麻烦的话，我很乐意。