CSS3搖擺效果是一種特別流行的網頁設計技巧，通過簡單的代碼實現讓網頁元素輕松搖擺，增加頁面的趣味性和生動性。下面我們來學習一下CSS3中如何實現搖擺效果。

/* 定義關鍵幀 */
@keyframes swing {
0% {
transform:rotate(0deg);
}
20% {
transform:rotate(15deg);
}
40% {
transform:rotate(-10deg);
}
60% {
transform:rotate(5deg);
}
80% {
transform:rotate(-5deg);
}
100% {
transform:rotate(0deg);
}
}
/* 添加搖擺效果 */
.swing {
animation:swing 2s ease-in-out infinite;
}

以上代碼中，我們通過關鍵幀來定義了每個階段的旋轉角度，然后將其添加到.swing類中，實現了搖擺動畫效果。其中，關鍵幀的0%代表動畫開始階段，100%代表結束階段，通過控制每個時間點元素的旋轉角度，讓元素產生搖擺效果。

此外，我們還可以通過調整關鍵幀和類的參數來實現不同的搖擺效果，例如改變旋轉角度、持續時間、次數等等。

總之，CSS3搖擺效果是一種非常有趣的網頁設計技巧，可以為網頁增添生動性和趣味性。希望以上介紹能夠幫助大家更好地掌握CSS3技能。