Это скорее теоретический вопрос с несколькими фрагментами кода. Я хотел бы создать сайт с фоном, полным плиток, которые постоянно меняют цвет и форму. Хорошим примером являются плитки Windows Phone 8. Конечно, позже я хотел бы создать более сложный эффект, но я хотел бы знать, как, например, вы будете изменять каждую квадратную область размером 50×50 пикселей.
Это фрагмент кода для постоянного изменения цвета фона.
.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;}
}
Теперь мне нужно создавать этот эффект снова и снова и снова, пока он не заполнит мою страницу, или есть лучший способ сделать это? Может быть, есть функция ‘random repeat’, похожая на 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>
Других решений пока нет …