CSS圖標晃動動畫是網頁設計中非常常見的一種效果。通過使用CSS動畫，可以讓圖標產生額外的動態效果，讓網頁更加豐富多彩。接下來，我們將演示幾種基本的CSS圖標晃動動畫效果。

//圖標晃動動畫示例一
.icon {
animation: shake 0.5s infinite;
}
@keyframes shake {
0% { transform: rotate(0deg); }
25% { transform: rotate(-5deg); }
50% { transform: rotate(0deg); }
75% { transform: rotate(5deg); }
100% { transform: rotate(0deg); }
}
//圖標晃動動畫示例二
.icon2 {
animation: shake2 0.5s infinite;
}
@keyframes shake2 {
0% { transform: translateX(0); }
10% { transform: translateX(-10px); }
20% { transform: translateX(10px); }
30% { transform: translateX(-10px); }
40% { transform: translateX(10px); }
50% { transform: translateX(-10px); }
60% { transform: translateX(10px); }
70% { transform: translateX(-10px); }
80% { transform: translateX(10px); }
90% { transform: translateX(-10px); }
100% { transform: translateX(0); }
}
//圖標晃動動畫示例三
.icon3 {
animation: shake3 1s infinite;
}
@keyframes shake3 {
0% {
transform: translateX(0) translateY(0) rotate(0);
filter: saturate(1) hue-rotate(0);
}
25% {
transform: translateX(-10px) translateY(-10px) rotate(-5deg);
filter: saturate(1) hue-rotate(5deg);
}
50% {
transform: translateX(10px) translateY(10px) rotate(5deg);
filter: saturate(1) hue-rotate(-5deg);
}
75% {
transform: translateX(-10px) translateY(-10px) rotate(-5deg);
filter: saturate(1) hue-rotate(5deg);
}
100% {
transform: translateX(0) translateY(0) rotate(0);
filter: saturate(1) hue-rotate(0);
}
}

這些示例中，CSS代碼使用了不同的動畫方式來實現圖標晃動效果，通過調整代碼中的屬性值，可以實現不同的圖標晃動效果，讓網頁更加生動有趣。嘗試著使用這些代碼來實現你自己的CSS圖標晃動動畫吧！