CSS3是一種強大的樣式語言，能夠讓我們的網站和應用程序看起來更加生動、吸引人。今天，我們要學習如何使用CSS3實現落葉的效果，使網頁更具自然和美感。

/* 定義一個動畫 */
@keyframes falling-leaves {
0% {
transform: translate(0, -100%);
}
100% {
transform: translate(100vw, 100vh);
opacity: 0;
}
}
/* 定義落葉樣式 */
.falling-leaf {
position: fixed;
top: -10%; /* 落葉初始位置 */
left: 0;
width: 50px;
height: 50px;
background-image: url('leaf.png'); /* 落葉圖片 */
background-size: cover;
animation: falling-leaves 8s linear infinite;
}

上面的CSS代碼中，我們定義了一個名為“falling-leaves”的動畫，并使用“transform”屬性定義了落葉的初始位置和最終位置。我們還使用“opacity”屬性定義落葉的透明度，以使其在最終位置消失。接下來，我們定義了一個名為“falling-leaf”的類，設置了落葉的初始位置、大小、背景圖片和動畫效果。

在HTML中，我們只需要為需要添加落葉效果的元素添加“falling-leaf”類即可：

<div class="falling-leaf"></div>

現在，您可以將此代碼添加到網站或應用程序中，體驗落葉效果的美妙感覺了！