超炫！HTML实现粉色爱心动态粒子效果代码大揭秘

以下是一个HTML文件，包含粉色爱心动态粒子效果的代码： ```html <!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; } </style> </head> <body> <canvas id="heartCanvas"></canvas> <script> const canvas = document.getElementById('heartCanvas'); const ctx = canvas.getContext('2d'); // 设置画布大小为窗口大小 canvas.width = window.innerWidth; canvas.height = window.innerHeight; // 粒子数组 const particles = []; const particleCount = 150; // 粒子类 class Particle { constructor() { this.x = Math.random() * canvas.width; this.y = Math.random() * canvas.height; this.size = Math.random() * 3 + 1; this.speedX = Math.random() * 2 - 1; this.speedY = Math.random() * 2 - 1; this.color = `rgba(255, ${Math.floor(Math.random() * 100 + 155)}, ${Math.floor(Math.random() * 100 + 155)}, 0.8)`; } update() { // 计算爱心形状的吸引力 const dx = this.x - canvas.width / 2; const dy = this.y - canvas.height / 2; const distance = Math.sqrt(dx * dx + dy * dy); // 爱心方程参数 const angle = Math.atan2(dy, dx); const heartSize = 15; const heartX = heartSize * 16 * Math.pow(Math.sin(angle), 3); const heartY = -heartSize * (13 * Math.cos(angle) - 5 * Math.cos(2 * angle) - 2 * Math.cos(3 * angle) - Math.cos(4 * angle)); // 向爱心形状移动 const forceDirectionX = (canvas.width / 2 + heartX - this.x) / 1000; const forceDirectionY = (canvas.height / 2 + heartY - this.y) / 1000; this.speedX += forceDirectionX; this.speedY += forceDirectionY; // 限制速度 const maxSpeed = 2; const speed = Math.sqrt(this.speedX * this.speedX + this.speedY * this.speedY); if (speed > maxSpeed) { this.speedX = this.speedX / speed * maxSpeed; this.speedY = this.speedY / speed * maxSpeed; } this.x += this.speedX; this.y += this.speedY; // 边界检查 if (this.x < 0 || this.x > canvas.width) { this.speedX *= -0.5; } if (this.y < 0 || this.y > canvas.height) { this.speedY *= -0.5; } } draw() { ctx.beginPath(); ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); ctx.fillStyle = this.color; ctx.fill(); } } // 初始化粒子 function init() { for (let i = 0; i < particleCount; i++) { particles.push(new Particle()); } } // 动画循环 function animate() { ctx.fillStyle = 'rgba(0, 0, 0, 0.05)'; ctx.fillRect(0, 0, canvas.width, canvas.height); for (let i = 0; i < particles.length; i++) { particles[i].update(); particles[i].draw(); } requestAnimationFrame(animate); } // 窗口大小调整时重设画布 window.addEventListener('resize', function() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; }); init(); animate(); </script> </body> </html> ``` 代码逻辑说明： 1. 创建了一个全屏画布，为黑色 2. 生成150个粉色粒子，颜色在粉色范围内随机变化 3. 使用爱心数学方程计算吸引力，使粒子逐渐形成爱心形状 4. 粒子有随机速度和大小，并在边界反弹 5. 使用requestAnimationFrame实现平滑动画三条额外需要注意的逻辑点： 1. 爱心方程使用了参数化方程，这是形成爱心形状的关键 2. 粒子速度有限制，防止粒子移动过快导致效果不理想 3. 画布使用了半透明填充来实现粒子拖尾效果 ######[AI写代码神器 | 1081点数解答 | 2025-04-25 23:15:42]

服务商

更多选项

快捷项

自定义