Question

这是一个带有一些代码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的'随机重复'功能？注意：瓷砖应该以起始颜色随机化。

谢谢！

Answer 1

肯定有更好的方法（因为通常情况下你会发现自己重复代码）。

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

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

＆＃13;

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

＆＃13;

.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
  */
}

＆＃13;

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

＆＃13;

更新

好的，这里是用JS动态添加tile，尽管从服务器端执行它可能是个更好的主意。当然，你可以控制你想要多少个瓷砖，我只把它作为一个例子。

＆＃13;

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

＆＃13;

.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
  */
}

＆＃13;

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

＆＃13;

背景颜色改变瓦片

1 个答案: