以下是一个超炫酷的爱心动画效果的HTML代码，它会生成一个跳动的3D爱心，并且带有粒子效果： ```html <!DOCTYPE html> <html> <head> <title>超炫酷爱心动画</title> <style> body { margin: 0; overflow: hidden; background: #000; } canvas { display: block; } </style> </head> <body> <canvas id="canvas"></canvas> <script> const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; const particles = []; const particleCount = 150; function resizeCanvas() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; } window.addEventListener('resize', resizeCanvas); 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() * 3 - 1.5; this.speedY = Math.random() * 3 - 1.5; this.color = `hsl(${Math.random() * 60 + 330}, 100%, 50%)`; } update() { this.x += this.speedX; this.y += this.speedY; if (this.size > 0.2) this.size -= 0.1; } draw() { ctx.fillStyle = this.color; ctx.beginPath(); ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); ctx.closePath(); ctx.fill(); } } function initParticles() { for (let i = 0; i < particleCount; i++) { particles.push(new Particle()); } } function drawHeart(t) { const scale = 15; const xOffset = canvas.width / 2; const yOffset = canvas.height / 2; ctx.beginPath(); for (let i = 0; i < 100; i++) { const angle = Math.PI * 2 * i / 100; const r = scale * (Math.sin(angle) * Math.sqrt(Math.abs(Math.cos(angle)))) / (Math.sin(angle) + 1.4); const x = xOffset + r * Math.cos(angle) * (0.5 + Math.sin(t * 0.002) * 0.3); const y = yOffset - r * Math.sin(angle) * (0.5 + Math.cos(t * 0.003) * 0.3); if (i === 0) { ctx.moveTo(x, y); } else { ctx.lineTo(x, y); if (Math.random() > 0.97) { particles.push(new Particle()); particles[particles.length - 1].x = x; particles[particles.length - 1].y = y; particles[particles.length - 1].size = Math.random() * 5 + 2; } } } ctx.closePath(); const gradient = ctx.createRadialGradient( xOffset, yOffset, 10, xOffset, yOffset, 100 ); gradient.addColorStop(0, '#ff3366'); gradient.addColorStop(1, '#ff0033'); ctx.fillStyle = gradient; ctx.fill(); ctx.strokeStyle = 'rgba(255, 255, 255, 0.3)'; ctx.lineWidth = 3; ctx.stroke(); } function animate() { ctx.fillStyle = 'rgba(0, 0, 0, 0.1)'; ctx.fillRect(0, 0, canvas.width, canvas.height); const time = Date.now(); drawHeart(time); for (let i = 0; i < particles.length; i++) { particles[i].update(); particles[i].draw(); if (particles[i].size <= 0.2) { particles.splice(i, 1); i--; } } while (particles.length < particleCount) { particles.push(new Particle()); } requestAnimationFrame(animate); } initParticles(); animate(); </script> </body> </html> ``` 这段代码会创建一个黑色的全屏，上面有一个跳动的3D爱心，爱心会不断释放彩色粒子。爱心本身有渐变颜色效果，并且会轻微地脉动和变形，创造出非常炫酷的视觉效果。 使用方法： 1. 将代码复制到一个文本编辑器中 2. 保存为 `.html` 文件（例如 `heart.html`） 3. 在浏览器中打开该文件 你可以通过修改代码中的参数来调整效果： - 修改 `particleCount` 可以改变粒子数量 - 修改颜色值可以改变爱心和粒子的颜色 - 调整 `scale` 可以改变爱心大小 [2025-04-16 21:39:34 | AI问答 | 1150点数解答]