以下是一个基于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>
这段代码实现了一个简单的树叶飘落动画特效，每次循环会在画布上随机生成若干个叶子，并让它们从画布顶部开始向下飘落，直至飘出画布，再重新生成并开始下一轮循环。可以通过修改叶子数量、颜色、大小等参数，以及调整飘落速度、方向等参数，来实现不同的效果。
