使用 Particles.js 实现网页粒子动态背景

创建三个文件:
index.hhtml

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Particles.js Background</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="particles-js"></div>

    <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

style.css

body {
    margin: 0;
    overflow: hidden;
}

#particles-js {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -1;
    background-color: black;
}

script.js

document.addEventListener("DOMContentLoaded", function() {
    // 配置 Particles.js
    particlesJS("particles-js", {
        particles: {
            number: {
                value: 80,
                density: {
                    enable: true,
                    value_area: 800
                }
            },
            color: {
                value: "#ffffff"
            },
            shape: {
                type: "circle",
                stroke: {
                    width: 0,
                    color: "#000000"
                },
                polygon: {
                    nb_sides: 5
                }
            },
            opacity: {
                value: 5,
                random: false,
                anim: {
                    enable: false,
                    speed: 1,
                    opacity_min: 0.1,
                    sync: false
                }
            },
            size: {
                value: 3,
                random: true,
                anim: {
                    enable: false,
                    speed: 40,
                    size_min: 0.1,
                    sync: false
                }
            },
            line_linked: {
                enable: true,
                distance: 150,
                color: "#ffffff",
                opacity: 0.8,
                width: 2
            },
            move: {
                enable: true,
                speed: 1,
                direction: "none",
                random: false,
                straight: false,
                out_mode: "out",
                bounce: false,
                attract: {
                    enable: false,
                    rotateX: 600,
                    rotateY: 1200
                }
            }
        },
        interactivity: {
            detect_on: "canvas",
            events: {
                onhover: {
                    enable: true,
                    mode: "grab"
                },
                onclick: {
                    enable: true,
                    mode: "push"
                },
                resize: true
            },
            modes: {
                grab: {
                    distance: 140,
                    line_linked: {
                        opacity: 1
                    }
                },
                bubble: {
                    distance: 400,
                    size: 40,
                    duration: 2,
                    opacity: 8,
                    speed: 3
                },
                repulse: {
                    distance: 200,
                    duration: 0.4
                },
                push: {
                    particles_nb: 4
                },
                remove: {
                    particles_nb: 2
                }
            }
        },
        retina_detect: true
    });
});

双击index.html即可在浏览器打开,效果图如下:
如果你需要进行自定义修改,下面几个修改点你可能感兴趣:
1.粒子移动速度
修改move.speed 参数,该参数控制粒子的移动速度,数值越大,移动速度越快,数值越小,移动速度越慢。

move: {
    enable: true,
    speed: 6,
    direction: "none",
    random: false,
    straight: false,
    out_mode: "out",
    bounce: false,
    attract: {
        enable: false,
        rotateX: 600,
        rotateY: 1200
    }
}

2.点的亮度和大小:

size.value: 控制粒子的大小,默认值为 3,数值越大,粒子越大。
color.value: 控制粒子的颜色,默认为白色。你可以设置为十六进制颜色值,例如 “#ff0000” 表示红色。
opacity.value: 控制粒子的透明度,默认值为 1,数值范围从 0 到 1,数值越大,粒子越不透明。

3.线条的亮度和大小:
line_linked.opacity: 控制线条的透明度,默认值为 0.4,数值范围从 0 到 1,数值越大,线条越不透明。
line_linked.width: 控制线条的宽度,默认值为 1,数值越大,线条越粗。

你可能感兴趣的:(JavaScript,javascript,html,css)