HTML做成一个粒子漩涡特效页面

大家好，今天制作制作一个粒子漩涡特效的页面！

先看具体效果：
在这里插入图片描述
要在一个单一的 index.html 页面中实现粒子漩涡特效，我们可以使用HTML、CSS和JavaScript（不需要外部库）。下面是一个简单的例子，展示了如何使用纯HTML和JavaScript来创建一个基本的粒子漩涡效果：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>粒子漩涡特效</title>
<style>body {margin: 0;overflow: hidden;background-color: #000;}canvas {display: block;position: absolute;top: 0;left: 0;}
</style>
</head>
<body>
<canvas id="particles"></canvas><script>const canvas = document.getElementById('particles');const ctx = canvas.getContext('2d');const particles = [];const particleCount = 200;const speed = 2;let centerX, centerY;// 初始化画布大小function resizeCanvas() {canvas.width = window.innerWidth;canvas.height = window.innerHeight;centerX = canvas.width / 2;centerY = canvas.height / 2;}// 初始化粒子function initParticles() {for (let i = 0; i < particleCount; i++) {particles.push({x: Math.random() * canvas.width,y: Math.random() * canvas.height,size: Math.random() * 2 + 1,speedX: (Math.random() - 0.5) * 2,speedY: (Math.random() - 0.5) * 2,targetX: centerX,targetY: centerY,});}}// 更新粒子位置function updateParticles() {for (let i = 0; i < particles.length; i++) {const particle = particles[i];// 靠近漩涡中心particle.targetX = centerX + (Math.sin(i / 5 + Date.now() * 0.001) * 100);particle.targetY = centerY + (Math.cos(i / 7 - Date.now() * 0.001) * 100);// 吸引粒子到漩涡中心const angle = Math.atan2(particle.y - centerY, particle.x - centerX);const distance = Math.sqrt(Math.pow(particle.x - centerX, 2) + Math.pow(particle.y - centerY, 2));particle.speedX += (Math.cos(angle) / distance * 0.01) * (speed - particle.size);particle.speedY += (Math.sin(angle) / distance * 0.01) * (speed - particle.size);// 更新位置particle.x += particle.speedX;particle.y += particle.speedY;// 边界检测if (particle.x < 0) particle.x = canvas.width;if (particle.y < 0) particle.y = canvas.height;if (particle.x > canvas.width) particle.x = 0;if (particle.y > canvas.height) particle.y = 0;}}// 绘制粒子function drawParticles() {ctx.clearRect(0, 0, canvas.width, canvas.height);ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';for (let i = 0; i < particles.length; i++) {const particle = particles[i];ctx.beginPath();ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);ctx.fill();}}// 动画循环function animate() {requestAnimationFrame(animate);updateParticles();drawParticles();}// 初始化resizeCanvas();initParticles();animate();// 监听窗口大小变化window.addEventListener('resize', resizeCanvas);
</script>
</body>
</html>