Question

我想拥有一些粒子，就像particles.js中的样子，但是没有任何动画，并且带有纯CSS代码。我知道可以做到这一点，但是我找不到任何示例或在线教程如何实现它。由于CPU使用率很高，因此动画部分对css-solution和js-solution都感到恼火。因此，我试图找到一种方法来删除动画并使用纯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>

如何在没有动画的情况下创建“粒子”网页背景（纯CSS）

1 个答案: