Javascript 如何创建没有动画的粒子网页背景（纯css）

我希望有一些粒子，就像它在particles.js中的样子，但是没有任何动画和纯CSS代码。我知道这是可以做到的，但我找不到任何例子或在线教程如何实现它。由于高CPU使用率，css解决方案和js解决方案的动画部分都很恼火。因此，我试图找到一种方法来删除动画，并使用纯css来获得更好的性能

• 粒子背景参考：

非常感谢

---

编辑：也许轻量级javascript版本也可以，只要它是轻量级的

您可以使用第二个示例中编译的CSS并删除其中用于动画目的的所有内容

如果您不介意（小型）基于JavaScript的解决方案，请参见下文。它使用

元素绘制粒子：

（函数（运行模块）{
//初始化。将200个粒子渲染到ID为“bg”的元素中。
//粒子的半径在3到9px（6+-3）之间，并且
//可以是红色、蓝色或绿色
runModule（document.querySelector（'#bg'），200,6[
“#c00”，
“#0c0”，
“#00c”
]);
})（功能（画布、particleCount、particleRadius、particleColor）{
var ctx=canvas.getContext（'2d'）；
var粒子=[]；
var粒子；
创建（）；
render（）；
window.addEventListener（'resize'，resize）；
函数makeParticle（半径、颜色）{
返回{
x：介于（半径、画布宽度-半径）之间，
y：介于（半径、画布高度-半径）之间，
r：介于（半径*0.5，半径*1.5）之间，
c:colors[Math.floor（Math.random（）*colors.length）]
};
}
函数创建（）{
粒子=[]；
while（particles.length
#bg{
背景：#000；
}
不太确定你想要实现什么。您希望粒子设置动画还是希望它们处于固定位置？链接的第二个参考已经为动画粒子显示了仅基于CSS的解决方案。@David抱歉，我认为我表达得很清楚，但我没有。这一期的标题表明我根本不想要动画。我只想创建固定位置的粒子。第二个参考实际显示的是scss版本，而不是css版本。我想知道它是否可以用css中的几行来完成。如果我从对css的第二次引用编译这个SCS，它将是一个大约有400行的巨大文件。我想要的只是一个轻量级的固定位置粒子的css或js解决方案。尽可能轻，我想尽量减少下载大小和浏览器加载时间。谢谢第二个示例中编译的CSS的大多数部分都与粒子的动画相关。因为你不想要动画，你可以去掉大约60%的CSS。@David非常感谢你的回复。我以前从未使用过SCS。我将尝试删除已编译的css，看看我能实现什么。干杯。非常感谢您提供完整的代码。我投了更高的票，并将此标记为答案。它工作得很好^_^