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