js实现菱形动态背景效果代码-html代码-BFW代码库

js实现菱形动态背景效果代码

代码语言：html

所属分类：背景

代码描述：js实现菱形动态背景效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html>
<head>
    <style>
        html {
            background: radial-gradient(ellipse at center, #ef0e39 0%, black 100%);
            overflow: hidden;
        }
    </style>

</head>
<body>
    <div id="bg">
    </div>
    <script>
        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) {
                            if (n == 0) {
              .........完整代码请登录后点击上方下载按钮下载查看