console
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<style>
#particles-js {
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
}
.content {
position: relative;
padding: 20px;
}
</style>
</head>
<body>
<div id="particles-js"></div>
<div class="content">
<h1>life should be</h1>
<p>@今天 四也要完成的事</p >
<p>皇帝是怎么诞生的</p >
</div>
<script>
particlesJS("particles-js", {
particles: {
number: { value: 80, density: { enable: true, value_area: 800 } },
color: { value: "#ff3cac" },
shape: { type: "circle" },
opacity: { value: 0.5, random: true },
size: { value: 3, random: true },
line_linked: {
enable: true,
distance: 150,
color: "#0fffc1",
opacity: 0.4,
width: 1
},
move: {
enable: true,
speed: 2,
direction: "none",
random: true
}
},
interactivity: {
detect_on: "canvas",
events: {
onhover: { enable: true, mode: "repulse" },
onclick: { enable: true, mode: "push" }
}
}
});
</script>
</body>
</html>