html 背景循环,CSS无限循环背景动画

JavaScript

{

var injectCSS = function injectCSS(selector, ruleset) {

// Create style element if it doesn't exist

var _style = null;

if (!document.querySelector('style#injectedCSS')) {

_style = document.createElement('style');

_style.type = 'text/css';

_style.id = 'injectedCSS';

document.getElementsByTagName('head')[0].appendChild(_style);

} else {

_style = document.querySelector('style#injectedCSS');

}

var _index = _style.sheet.cssRules.length;

_style.sheet.insertRule(selector + ' { ' + ruleset + ' }', _index);

};

var createRow = function createRow(x, y, id) {

var _row = document.createElement('div');

_row.style.top = y + 'px';

_row.style.left = x + 'px';

_row.classList.add('row');

_row.setAttribute('id', id);

container.appendChild(_row);

};

var createCard = function createCard(x, y, row, id) {

var _card = document.createElement('div');

_card.style.top = y + 'px';

_card.style.left = x + 'px';

_card.classList.add('card');

_card.setAttribute('id', id);

document.querySelector(row).appendChild(_card);

};

// Settings

// Animation

var animate = function animate() {

document.querySelector('#canvas').classList.add('animate');

};

var desanimate = function desanimate() {

document.querySelector('#canvas').classList.remove('animate');

};

var app = {

width: 720,

height: 460,

card: {

ratio: { w: 4, h: 3 },

blockSize: 40

},

animate: {

active: true,

speed: 3

}

// Init elements

};var sketch = document.querySelector('#canvas');

sketch.style.width = app.width + 'px';

sketch.style.height = app.height + 'px';

var container = document.createElement('div');

container.classList.add('container');

container.id = 'container';

sketch.appendChild(container);

var cardWidth = app.card.ratio.w * app.card.blockSize;

var cardHeight = app.card.ratio.h * app.card.blockSize;

injectCSS('.card', 'width: ' + cardWidth + 'px; height: ' + cardHeight + 'px');

var cardsNumX = Math.ceil(app.width / (app.card.ratio.h * app.card.blockSize)) + 2;

var cardsNumY = Math.ceil(app.height / app.card.blockSize) + 3;

var colors = ['alpha', 'beta', 'gamma'];

// Create Elements

for (var v = 0, i = 0; v < cardsNumY; v++, i++) {

var _vid = 'row_' + v;

createRow(-(app.card.blockSize * v), app.card.blockSize * v, _vid);

for (var h = 0; h < cardsNumX; h++) {

var _hid = 'r' + v + 'c' + h;

createCard(app.card.blockSize * (app.card.ratio.w - 1) * h, app.card.blockSize * h, '#' + _vid, _hid);

injectCSS('#' + _hid, 'z-index: ' + (cardsNumX - h));

var _className = colors[(h + i % 3) % colors.length];

document.querySelector('#' + _hid).classList.add('card-' + _className);

}

injectCSS('#' + _vid, 'z-index: ' + v + ';');

// Pyramize it... ˉ\_(ツ)_/ˉ

if (i % app.card.ratio.h == app.card.ratio.h - 1) {

cardsNumX++;

}

}

injectCSS('@keyframes card-move', '\n 0% { transform: translateX(0) translateY(0) }\n 15%, 25% { transform: translateX(0) translateY(' + app.card.blockSize + 'px) }\n 40%, 50% { transform: translateX(0) translateY(' + app.card.blockSize * 2 + 'px) }\n 65%, 75% { transform: translateX(' + app.card.blockSize + 'px) translateY(' + app.card.blockSize * 2 + 'px) }\n 90%, 100% { transform: translateX(' + app.card.blockSize + 'px) translateY(' + app.card.blockSize * 3 + 'px) }\n ');

injectCSS('.animate .card', 'animation: card-move ' + app.animate.speed + 's infinite ease-in-out;');

if (app.animate.active) {

animate();

}

// Activate / deactivate onclick

injectCSS('.container', 'cursor: pointer;');

document.querySelector('.container').onclick = function () {

if (!app.animate.active) {

animate();

} else {

desanimate();

};

app.animate.active = !app.animate.active;

};

}