CSS3樹葉擺動是一種很有趣的動畫效果，可以為網站增添美麗的視覺效果。下面我們來介紹一下如何利用CSS3實現樹葉擺動動畫。

/* 設置樹葉樣式 */
.leaf {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50px;
height: 50px;
background-color: #00bcd4;
clip-path: polygon(0 5%, 17% 5%, 32% 0, 44% 5%, 60% 5%, 62% 15%, 82% 15%, 100% 32%, 70% 82%, 67% 95%, 55% 100%, 50% 100%, 45% 100%, 33% 95%, 30% 82%, 0 32%);
}
/* 設置動畫 */
@keyframes swing {
0% { transform: rotate(0deg); }
25% { transform: rotate(10deg); }
75% { transform: rotate(-10deg); }
100% { transform: rotate(0deg); }
}
/* 給樹葉添加動畫 */
.leaf {
animation: swing 2s ease-in-out infinite;
}

以上是一個簡單的CSS3樹葉擺動動畫示例。首先，我們需要定義樹葉的樣式，包括位置、大小、背景顏色和裁剪路徑等。然后，我們利用CSS3的關鍵幀動畫技術定義一個swing動畫，該動畫控制樹葉在25%和75%時分別向右和向左旋轉10度，其余時間保持不動。最后，我們通過將動畫應用于.leaf類來給樹葉添加動畫效果。

使用CSS3樹葉擺動動畫可以為網站增加一些有趣的細節，使用戶感覺更加舒適和愉悅。我們可以使用類似的技術來實現其他的動畫效果，如淡入淡出、旋轉等。