以下是一个基于HTML5实现的树叶飘落动画特效：
<!DOCTYPE html> <html> <head> <title>树叶飘落动画特效</title> <style> body { background-color: #000; overflow: hidden; } canvas { display: block; position: absolute; top: 0; left: 0; } </style> </head> <body> <canvas id="canvas"></canvas> <script> var canvas = document.getElementById('canvas'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; var ctx = canvas.getContext('2d'); var leaves = []; var numLeaves = 50; // 构造叶子对象 function createLeaf() { this.x = Math.random() * canvas.width; this.y = -10; this.vx = Math.random() * 2 - 1; this.vy = Math.random() * 3 + 1; this.draw = function() { ctx.fillStyle = "#8BC34A"; ctx.beginPath(); ctx.arc(this.x, this.y, 10, 0, Math.PI * 2, true); ctx.closePath(); ctx.fill(); } this.update = function() { this.x += this.vx; this.y += this.vy; if (this.y > canvas.height + 10) { this.y = -10; this.x = Math.random() * canvas.width; } } } // 初始化叶子 function init() { for (var i = 0; i < numLeaves; i++) { leaves.push(new createLeaf()); } } // 动画循环 function loop() { requestAnimationFrame(loop); ctx.clearRect(0, 0, canvas.width, canvas.height); for (var i = 0; i < numLeaves; i++) { leaves[i].draw(); leaves[i].update(); } } // 执行初始化和动画循环 init(); loop(); </script> </body> </html>
这段代码实现了一个简单的树叶飘落动画特效，每次循环会在画布上随机生成若干个叶子，并让它们从画布顶部开始向下飘落，直至飘出画布，再重新生成并开始下一轮循环。可以通过修改叶子数量、颜色、大小等参数，以及调整飘落速度、方向等参数，来实现不同的效果。
