HTML5落葉動畫是一種非常流行的網頁特效，可以為網頁增加生動、有趣的效果，引人注目。下面是一個簡單的HTML5落葉動畫代碼示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>落葉動畫</title>
<style>
/* 設置落葉樣式 */
.leaf {
position: absolute;
width: 50px;
height: 50px;
background: url(leaf.png) no-repeat;
background-size: 100% 100%;
animation: leaf-fall 5s infinite;
}
/* 設置落葉動畫 */
@keyframes leaf-fall {
0% {
transform: translate(0, 0) rotate(0);
}
100% {
transform: translate(200px, 400px) rotate(360deg);
}
}
</style>
</head>
<body>
<!-- 添加落葉元素 -->
<div class="leaf"></div>
</body>
</html>上面的代碼中，首先定義了一個名為"leaf"的CSS類，用于設置落葉元素的樣式和動畫。其中，"position: absolute"用于絕對定位，"width"和"height"用于設置元素大小，"background"和"background-size"用于設置背景圖片和大小，"animation"用于設置動畫效果，包括動畫規則和時間等。
接著，在"style"標簽中使用"@keyframes"關鍵詞定義了一個名為"leaf-fall"的動畫，指定了落葉從0%到100%的運動軌跡，其中"transform: translate()"指定落葉的平移效果，而"rotate()"指定了落葉的旋轉角度。
最后，將落葉元素添加到網頁中，即可看到落葉在屏幕上飄落的動畫效果。