CSS吃豆人動畫是一種經(jīng)典的CSS動畫，它呈現(xiàn)出了一個小球在追逐另一個小球，就像游戲“吃豆人”中追逐豆子的主角一樣。以下是一個簡單的CSS代碼實現(xiàn)此動畫效果：

.dots {
position: absolute;
top: 50%;
left: 50%;
display: inline-block;
transform: translate(-50%, -50%);
width: 300px;
height: 300px;
}
.dot-1, .dot-2 {
position: absolute;
top: 100px;
left: 100px;
width: 50px;
height: 50px;
border-radius: 50%;
background: yellow;
animation: chase 2s infinite linear;
}
.dot-2 {
top: 150px;
left: 150px;
}
@keyframes chase {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

實現(xiàn)這一動畫的核心在于CSS的關(guān)鍵幀動畫。通過定義從0%到100%的關(guān)鍵幀，我們可以指定小球經(jīng)過的運動路徑和動畫持續(xù)時間。在這里，我們定義了一個名為"chase"的動畫，每個小球都會應(yīng)用這個動畫，并且會無限循環(huán)播放。

另外，我們還通過CSS的transform屬性指定了小球的位置和大小，并且通過translate屬性將它們居中對齊。這一技術(shù)在CSS中非常流行，因為它不需要固定的像素值，而是使用相對于父元素的百分比來定義位置。

最終的結(jié)果是，我們創(chuàng)建了一個漂亮、流暢的CSS動畫，讓人感到它就像一個真正的吃豆人游戲一樣。