实现粒子效果通常涉及使用编程语言和图形库来创建和控制粒子系统。以下是使用 JavaScript 和 HTML5 的简单示例。
```html
body, html {
margin: 0;
padding: 0;
overflow: hidden;
height: 100%;
}
canvas {
display: block;
}
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let particlesArray;
// 创建粒子对象
class Particle {
constructor(x, y, size, color, weight) {
this.x = x;
this.y = y;
this.size = size;
this.color = color;
this.weight = weight;
}
draw() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.fillStyle = this.color;
ctx.fill();
}
update() {
this.size = 0.05;
if (this.size < 0) {
this.x = Math.random() * canvas.width;
this.y = canvas.height 100;
this.size = Math.random() * 10 2;
this.weight = Math.random() * 2 1;
}
this.y = this.weight;
this.draw();
}
}
function init() {
particlesArray = [];
for (let i = 0; i < 100; i ) {
const x = Math.random() * canvas.width;
const y = Math.random() * canvas.height;
const size = Math.random() * 5 2;
const color = 'rgba(255,255,255,0.8)';
const weight = Math.random() * 2 1;
particlesArray.push(new Particle(x, y, size, color, weight));
}
}
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let i = 0; i < particlesArray.length; i ) {
particlesArray[i].update();
}
requestAnimationFrame(animate);
}
init();
animate();