📅 最后修改于: 2023-12-03 14:40:08.792000 🧑 作者: Mango
CodePen是一个在线的前端开发社区，可以让开发者分享他们的代码和项目，粒子JS是CodePen上一个流行的特效，可以通过JS代码创建出独特的动态效果。
粒子特效是一种创造舞动、互动和有趣的交互式输出的技术。粒子特效使得网站、游戏和应用程序更容易令人惊叹和令人兴奋，粒子特效的灵活性也让它们成为前端开发者的一种常用工具。
CodePen上的粒子特效可以让开发者通过JS和CSS代码创建出各种个性化的特效，从简单的雪花飘落到复杂的3D图像，可以通过CodePen搜索和浏览开发者们分享的各种粒子特效。
下面是一个简单的粒子特效的示例代码：
<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%;
background-color: #000;
}
</style>
</head>
<body>
<div id="particles-js"></div>
<script>
particlesJS("particles-js", {
particles: {
number: { value: 100, density: { enable: true, value_area: 800 } },
color: { value: "#fff" },
shape: {
type: "circle",
stroke: { width: 0, color: "#000000" },
polygon: { nb_sides: 5 },
image: { src: "img/github.svg", width: 100, height: 100 },
},
opacity: {
value: 0.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: "#fff",
opacity: 0.4,
width: 1,
},
move: {
enable: true,
speed: 6,
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: "repulse" },
onclick: { enable: true, mode: "push" },
resize: true,
},
modes: {
grab: { distance: 400, line_linked: { opacity: 1 } },
bubble: {
distance: 400,
size: 40,
duration: 2,
opacity: 8,
speed: 3,
},
repulse: { distance: 200 },
push: { particles_nb: 4 },
remove: { particles_nb: 2 },
},
},
retina_detect: true,
});
</script>
</body>
</html>
以上代码使用了particles.js库实现了一个简单的粒子特效，在网页中添加了100个白色圆形粒子，粒子具有运动、互动和随机性，可以根据开发者的需要来调整速度、颜色和形状等属性。
CodePen上的粒子特效让开发者可以很容易地通过JS和CSS代码创建出各种独特的特效，可以让网站、游戏和应用程序更具有交互性和视觉冲击力。粒子特效是前端开发的一种常用工具，可以通过CodePen浏览和探索更多的粒子特效代码。