如何在没有动画的情况下创建粒子网页背景(纯css)

Question

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

• 粒子背景参考资料：
  • https://vincentgarreau.com/particles.js/
  • https://webdesign.tutsplus.com/tutorials/2-ways-to-create-an-animated-particle-background--cms-30224

​

非常感谢。

编辑:也许轻量级的javascript版本也不错，只要它是轻量级的。

Answer 1

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

如果您不介意基于(小型) JavaScript的解决方案，请参阅下面。它使用<canvas>元素绘制粒子：

​

(function (runModule) {
  // init. renders 200 particles into the element with ID "bg".
  // particles have a radius between 3 and 9px (6 +- 3) and
  // can either be red, blue or green
  runModule(document.querySelector('#bg'), 200, 6, [
    '#c00',
    '#0c0',
    '#00c'
  ]);
})(function (canvas, particleCount, particleRadius, particleColors) {
  var ctx = canvas.getContext('2d');
  var particles = [];
  var particle;
  
  create();
  render();
  
  window.addEventListener('resize', resize);
  
  function makeParticle (radius, colors) {
    return {
      x: between(radius, canvas.width - radius),
      y: between(radius, canvas.height - radius),
      r: between(radius * 0.5, radius * 1.5),
      c: colors[Math.floor(Math.random() * colors.length)]
    };
  }

  function create () {
    particles = [];
    while (particles.length < particleCount) {
      particle = makeParticle(particleRadius, particleColors);
      particles.push(particle);
    }
  }
  
  function render () {
  	ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  	particles.forEach(function (particle) {
    	ctx.beginPath();
    	ctx.arc(particle.x, particle.y, particle.r, 0, Math.PI * 2);
    	ctx.closePath();
    	ctx.fillStyle = particle.c;
    	ctx.fill();
    })
  }
    
  function resize () {
    var rect = canvas.parentNode.getBoundingClientRect();
    canvas.width = rect.width;
    canvas.height = rect.height;
    create();
    render();
  }
  
  function between (a, b) {
    return Math.round(Math.max(a, Math.random() * b));
  }
});

#bg {
  background: #000;
}

<canvas id="bg" width="320" height="200"></canvas>

​