css整张背景 多边形,JS/CSS3 低多边形大红绸缎全屏背景图（无图片）

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

var pointsDuration = 10000;

var pointsTimeout;

var unitSize;

var numPointsX;

var numPointsY;

var unitWidth;

var unitHeight;

var pointsArray;

var splines = '0.5 0.5 0.5 0.5';

var times = '0;1';

window.onload = onLoad;

window.onresize = onResize;

function onLoad() {

var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');

var svgNS = svg.namespaceURI;

svg.setAttribute('width', window.innerWidth);

svg.setAttribute('height', window.innerHeight);

document.querySelector('#bg').appendChild(svg);

unitSize = (window.innerWidth + window.innerHeight) / 20;

numPointsX = Math.ceil(window.innerWidth / unitSize) + 1;

numPointsY = Math.ceil(window.innerHeight / unitSize) + 1;

unitWidth = Math.ceil(window.innerWidth / (numPointsX - 1));

unitHeight = Math.ceil(window.innerHeight / (numPointsY - 1));

pointsArray = [];

for (var y = 0; y < numPointsY; y++) {

for (var x = 0; x < numPointsX; x++) {

var newX = unitWidth * x;

var newY = unitHeight * y;

pointsArray.push({

x: newX,

y: newY,

trueX: newX,

trueY: newY

});

}

}

randomizePoints();

for (var i = 0; i < pointsArray.length; i++) {

if (pointsArray[i].trueX != unitWidth * (numPointsX - 1) && pointsArray[i].trueY != unitHeight * (numPointsY - 1)) {

var topLeftX = pointsArray[i].x;

var topLeftY = pointsArray[i].y;

var topRightX = pointsArray[i + 1].x;

var topRightY = pointsArray[i + 1].y;

var bottomLeftX = pointsArray[i + numPointsX].x;

var bottomLeftY = pointsArray[i + numPointsX].y;

var bottomRightX = pointsArray[i + numPointsX + 1].x;

var bottomRightY = pointsArray[i + numPointsX + 1].y;

var rando = Math.floor(Math.random() * 2);

for (var n = 0; n < 2; n++) {

var polygon = document.createElementNS(svgNS, 'polygon');

if (rando == 0) {

if (n == 0) {

polygon.point1 = i;

polygon.point2 = i + numPointsX;

polygon.point3 = i + numPointsX + 1;

polygon.setAttribute('points', topLeftX + ',' + topLeftY + ' ' + bottomLeftX + ',' + bottomLeftY + ' ' + bottomRightX + ',' + bottomRightY);

} else if (n == 1) {

polygon.point1 = i;

polygon.point2 = i + 1;

polygon.point3 = i + numPointsX + 1;

polygon.setAttribute('points', topLeftX + ',' + topLeftY + ' ' + topRightX + ',' + topRightY + ' ' + bottomRightX + ',' + bottomRightY);

}

} else if (rando == 1) {

if (n == 0) {

polygon.point1 = i;

polygon.point2 = i + numPointsX;

polygon.point3 = i + 1;

polygon.setAttribute('points', topLeftX + ',' + topLeftY + ' ' + bottomLeftX + ',' + bottomLeftY + ' ' + topRightX + ',' + topRightY);

} else if (n == 1) {

polygon.point1 = i + numPointsX;

polygon.point2 = i + 1;

polygon.point3 = i + numPointsX + 1;

polygon.setAttribute('points', bottomLeftX + ',' + bottomLeftY + ' ' + topRightX + ',' + topRightY + ' ' + bottomRightX + ',' + bottomRightY);

}

}

polygon.setAttribute('fill', 'rgba(0,0,0,' + (Math.random() / 3) + ')');

var animatePoints = document.createElementNS('http://www.w3.org/2000/svg', 'animate');

animatePoints.setAttribute('fill', 'freeze');

animatePoints.setAttribute('attributeName', 'points');

animatePoints.setAttribute('dur', pointsDuration + 'ms');

animatePoints.setAttribute('keySplines', splines);

animatePoints.setAttribute('keyTimes', times);

animatePoints.setAttribute('calcMode', 'spline');

polygon.appendChild(animatePoints);

svg.appendChild(polygon);

}

}

}

onPointsInterval();

}

function randomizePoints() {

for (var i = 0; i < pointsArray.length; i++) {

if (pointsArray[i].trueX != 0 && pointsArray[i].trueX != unitWidth * (numPointsX - 1)) {

pointsArray[i].x = pointsArray[i].trueX + Math.random() * unitWidth - unitWidth / 2;

}

if (pointsArray[i].trueY != 0 && pointsArray[i].trueY != unitHeight * (numPointsY - 1)) {

pointsArray[i].y = pointsArray[i].trueY + Math.random() * unitHeight - unitHeight / 2;

}

}

}

function onPointsInterval() {

randomizePoints();

for (var i = 0; i < document.querySelector('#bg svg').childNodes.length; i++) {

var polygon = document.querySelector('#bg svg').childNodes[i];

var animate = polygon.childNodes[0];

if (animate.getAttribute('to')) {

animate.setAttribute('from', animate.getAttribute('to'));

}

animate.setAttribute('to', pointsArray[polygon.point1].x + ',' + pointsArray[polygon.point1].y + ' ' + pointsArray[polygon.point2].x + ',' + pointsArray[polygon.point2].y + ' ' + pointsArray[polygon.point3].x + ',' + pointsArray[polygon.point3].y);

animate.beginElement();

}

pointsTimeout = setTimeout(function() {

onPointsInterval();

}, pointsDuration);

}

function onResize() {

while (document.getElementById("polygonContainer").hasChildNodes()) {

document.getElementById("polygonContainer").removeChild(document.getElementById("polygonContainer").lastChild);

}

clearTimeout(pointsTimeout);

onLoad();

}