CSS3 葉子飄落是一種很有趣的效果，它可以讓網頁看起來更加自然、生動。下面我們來看看如何實現這個效果。

/* 定義葉子的樣式 */
.leaf {
width: 40px;
height: 40px;
background-image: url('leaf.png');
background-size: 100% 100%;
position: absolute;
top: -100px;
animation: leaf-fall 10s linear infinite;
}
/* 定義葉子下落動畫 */
@keyframes leaf-fall {
0% {
transform: translate(0, -100px);
}
100% {
transform: translate(300px, 800px) rotate(720deg);
opacity: 0;
}
}
/* 將葉子添加到頁面 */
for (var i=0; i<50; i++) {
var leaf = document.createElement('div');
leaf.className = 'leaf';
leaf.style.left = Math.random() * window.innerWidth + 'px';
leaf.style.animationDelay = Math.random() * 10 + 's';
document.body.appendChild(leaf);
}

代碼中的.leaf樣式定義了葉子的大小、背景圖像以及下落時的動畫效果。動畫使用了translate和rotate屬性來實現。

為了讓葉子在頁面中隨機分布，并且按照不同的延遲時間下落，我們需要使用 JavaScript 來動態添加葉子，并設置相應的樣式。

以上就是實現 CSS3 葉子飄落效果的方法。你可以通過調整代碼中的參數，來控制葉子的數量、速度和大小等，從而實現更加自由、生動的效果。