svg实现动态红色立体菱形背景效果代码
代码语言:html
所属分类:背景
代码描述:svg实现动态红色立体菱形背景效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html> <head> <meta charset="utf-8"> <style type="text/css"> html { background: radial-gradient(ellipse at center, #ef0e39 0%, black 100%); overflow: hidden; } </style> </head> <body> <div id="bg"></div> <script type="text/javascript"> var refreshDuration = 10000; var refreshTimeout; var numPointsX; var numPointsY; var unitWidth; var unitHeight; var points; function onLoad() { var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); svg.setAttribute('width',window.innerWidth); svg.setAttribute('height',window.innerHeight); document.querySelector('#bg').appendChild(svg); var 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)); points = []; for(var y = 0; y < numPointsY; y++) { for(var x = 0; x < numPointsX; x++) { points.push({x:unitWidth*x, y:unitHeight*y, originX:unitWidth*x, originY:unitHeight*y}); } } randomize(); for(var i = 0; i < points.length; i++) { if(points[i].originX != unitWidth*(numPointsX-1) && points[i].originY != unitHeight*(numPointsY-1)) { var topLeftX = points[i].x; var topLeftY = points[i].y; var topRightX = points[i+1].x; var topRightY = points[i+1].y; var bottomLeftX = points[i+numPointsX].x; var bottomLeftY = points[i+numPointsX].y; var bottomRightX = points[i+numPointsX+1].x; var bottomRightY = points[i+numPointsX+1].y; var rando = Math.floor(Math.random()*2); for(var n = 0; n < 2; n++) { var polygon = document.createElementNS(svg.namespaceURI, '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) { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0