CSS提供了很多簡單易用的動畫效果，其中之一就是球晃動。球晃動是指將一個圖片或者文字以球的形式進行晃動，讓用戶在視覺上有一種球體的感覺。這個效果很適用于一些體育、運動類的網站，讓用戶更加容易進入主題。

.ball {
width: 150px;
height: 150px;
background-color: #FFD700;
border-radius: 50%;
position: relative;
animation-name: shaky;
animation-duration: 0.5s;
animation-iteration-count: infinite;
}
@keyframes shaky {
20% {
transform: translateX(-5px) rotate(-20deg);
}
40% {
transform: translateX(5px) rotate(20deg);
}
60% {
transform: translateX(-5px) rotate(-20deg);
}
80% {
transform: translateX(5px) rotate(20deg);
}
100% {
transform: translateX(0) rotate(0);
}
}

以上是球晃動的CSS樣式代碼，在這個代碼中，我們通過設置animation-name、animation-duration和animation-iteration-count屬性來實現動畫效果。同時，我們使用了@keyframes來定義動畫的實現方式。首先將球體定位在相對位置，然后通過變換形狀、位置以及旋轉來模擬球的運動狀態。

球晃動效果非常炫酷，達到了預期的效果，我們也可以在實際項目中使用這項技術。使用這項技術可以讓我們在一些動畫效果中添加非常多的設計元素，可以讓我們在一些WEB設計中實現更好的用戶體驗。