1.效果
2.代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>body,html {margin: 0;padding: 0;width: 100%;height: 100%;overflow: hidden;}</style><title>文本粒子动画</title>
</head><body><script>const canvas = document.createElement('canvas');canvas.width = window.innerWidth;canvas.height = window.innerHeight;document.body.appendChild(canvas);const ctx = canvas.getContext('2d');// 粒子类 class Particle {constructor(x, y) {this.x = x;this.y = y;this.size = Math.random() * 6 + 1; // 随机大小 this.velocityY = Math.random() * 10 - 0.5; // 垂直速度 this.velocityX = Math.random() * 20 - 1; // 水平速度 this.alpha = Math.random(); // 透明度 this.lifespan = Math.random() * 200 + 100; // 生命周期 }// 更新粒子 update() {this.x += this.velocityX;this.y += this.velocityY + 0.5; // 重力效果 this.alpha -= 0.01; // 随时间减少透明度 this.lifespan--;// 如果粒子生命周期结束，则移除它 if (this.lifespan <= 0) {return true;}// 设置颜色 ctx.globalAlpha = this.alpha;ctx.beginPath();ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);ctx.fillStyle = `hsl(${360 * Math.random()}, 100%, 50%)`; // 随机颜色 ctx.fill();return false;}}// 粒子数组 let particles = [];// 渲染火焰 function renderFlame() {ctx.clearRect(0, 0, canvas.width, canvas.height);particles = particles.filter(particle => {return !particle.update();});requestAnimationFrame(renderFlame);}// 在鼠标移动时创建新的粒子 canvas.addEventListener('click', (e) => {const rect = canvas.getBoundingClientRect();const x = e.clientX - rect.left;const y = e.clientY - rect.top;// 清除之前的粒子（可选，如果你想在每次鼠标移动时都重新开始） particles = [];// 在鼠标位置附近创建粒子 createFlame(x, y);});// 创建火焰（粒子） function createFlame(x, y) {for (let i = 0; i < 100; i++) {// 为了使粒子从鼠标位置向四周扩散，可以添加一些随机性 const offsetX = (Math.random() - 0.5) * 50;const offsetY = (Math.random() - 0.5) * 50;particles.push(new Particle(x + offsetX, y + offsetY));}}// 开始渲染 renderFlame();// 窗口大小变化时调整canvas大小 window.addEventListener('resize', () => {canvas.width = window.innerWidth;canvas.height = window.innerHeight;});</script>
</body></html>
3.结语
文本粒子动画是一种引人注目的视觉效果，通过使用HTML5 Canvas和JavaScript实现，能够为网页增添活力和趣味。本文利用前端技术实现一个简单的文本粒子动画效果。
我们定义了一个粒子类，每个粒子具有自己的位置、大小、速度、透明度和生命周期等属性。通过不断更新粒子的位置、大小和透明度，再结合随机颜色填充，从而实现了点击鼠标会有天女散花般的动态效果。如果需要更改粒子，让它变成真的花花，参考这篇文章：爱心粒子特效
