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实现，能够为网页增添活力和趣味。本文利用前端技术实现一个简单的文本粒子动画效果。
我们定义了一个粒子类，每个粒子具有自己的位置、大小、速度、透明度和生命周期等属性。通过不断更新粒子的位置、大小和透明度，再结合随机颜色填充，从而实现了点击鼠标会有天女散花般的动态效果。如果需要更改粒子，让它变成真的花花，参考这篇文章：爱心粒子特效