超炫！HTML 代码实现粒子樱花树特效

以下是一个简单的 HTML 代码示例，用于创建一个带有粒子效果的樱花树的页面布局： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>粒子樱花树</title> <style> body { margin: 0; padding: 0; overflow: hidden; background-color: #000; } #particle-container { position: absolute; width: 100%; height: 100%; } </style> </head> <body> <div id="particle-container"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/18.6.4/tween.min.js"></script> <script> // 粒子对象 function Particle(x, y) { this.x = x; this.y = y; this.speedX = Math.random() * 2 - 1; this.speedY = Math.random() * 2 - 1; this.size = Math.random() * 5 + 1; this.life = Math.random() * 100 + 200; } // 更新粒子位置 Particle.prototype.update = function() { this.x += this.speedX; this.y += this.speedY; if (this.x < 0 || this.x > window.innerWidth) { this.speedX = -this.speedX; } if (this.y < 0 || this.y > window.innerHeight) { this.speedY = -this.speedY; } this.life--; }; // 绘制粒子 Particle.prototype.draw = function(ctx) { ctx.beginPath(); ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); ctx.fillStyle = 'pink'; ctx.fill(); }; // 主函数 function main() { var canvas = document.createElement('canvas'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; document.body.appendChild(canvas); var ctx = canvas.getContext('2d'); var particles = []; for (var i = 0; i < 500; i++) { particles.push(new Particle(Math.random() * window.innerWidth, Math.random() * window.innerHeight)); } function animate() { ctx.clearRect(0, 0, window.innerWidth, window.innerHeight); for (var i = 0; i < particles.length; i++) { particles[i].update(); particles[i].draw(ctx); if (particles[i].life <= 0) { particles.splice(i, 1); i--; } } requestAnimationFrame(animate); } animate(); } main(); </script> </body> </html> ``` 额外需要注意的逻辑点： 1. 确保引入的 Tween.js 库路径正确。 2. 粒子数量和速度等参数可以根据实际效果进行调整。 3. 注意浏览器的兼容性，可能需要对不同浏览器进行额外的处理。 ######[AI写代码神器 | 806点数解答 | 2025-04-13 03:46:41]

服务商

更多选项

快捷项

自定义