js实现粒子喷射动画效果代码-html代码-BFW代码库

js实现粒子喷射动画效果代码

代码语言：html

所属分类：粒子

代码描述：js实现粒子喷射动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">

  
  
  
<style>
body,
html {
  margin: 0;
  overflow: hidden;
  min-height: 100vh;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

#myElement {
  width: 50px;
  height: 50px;
  background: #ccc;
}
</style>


  
  
</head>

<body translate="no">
  <div id="myElement"></div>

<script>
	window.onload = () => {
		new ParticleFirework({
			elementId: 'myElement',
			duration: 450,
			delay: 250,
			numParticles: 200,
			colors: ['#ff0000', '#00ff00', '#0000ff'],
			size: 5,
			shape: 'square', // square, triangle, circle
			spread: 3 
		});
	};
</script>
  
      <script>
class ParticleFirework {
  constructor(options) {
    this.targetElement = document.getElementById(options.elementId);
    this.duration = options.duration || 100; // Default duration is 100 frames
    this.delay = options.delay || 0; // Default delay is 0 (no delay)
    this.totalParticles = options.numParticles || 100; // Default to 100 particles
    this.colors = options.colors || ['#ff00ff']; // Default color is magenta
    this.gravity = 0.05; // Gravity constant
    this.size = options.size || 5; // Default size of particles
    this.shape = options.shape || 'circle'; // Default shape is 'circle'
    this.spread = options.spread || 2; // Default spread, controls velocity
    this.particlesPerFrame = Math.ceil(this.totalParticles / this.duration);
    this.currentParticles = 0;
    this.particles = [];

    if (!this.targetElement) {
      console.error(`Element with ID "${options.elementId}" not found.`);
    } else {
      setTimeout(() => this.animateParticles(), this.delay);
    }
  }

  createParticle(x, y) {
    const particle = document.createElement('div');
    particle.style.position = 'absolute';
    particle.style.left = `${x}px`;
    particle.style.top = `${y}px`;
    particle.style.width = `${this.size}px`;
    particle.style.height = `${this.size}px`;
    part.........完整代码请登录后点击上方下载按钮下载查看