CSS 吃豆人效果是一個有趣而且獨特的 CSS 動畫效果。這個效果可以讓一個普通的方塊變成一個類似于游戲“吃豆人”的效果。

.chi-dou-ren {
position: relative;
width: 40px;
height: 40px;
background-color: #F5DEB3;
border-radius: 50%;
animation: chi-dou-ren 1s infinite;
}
@keyframes chi-dou-ren {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(45deg);
}
50% {
transform: rotate(90deg);
}
75% {
transform: rotate(135deg);
}
100% {
transform: rotate(180deg);
}
}

上面的代碼展示了如何創(chuàng)建一個 CSS 吃豆人效果的方塊。通過給這個方塊添加chi-dou-ren類名，并且為這個類名添加動畫效果，就可以讓這個方塊動起來了。

這個效果的核心是使用transform: rotate()屬性，通過不同角度的旋轉來實現(xiàn)一個動態(tài)的效果。在這段 CSS 代碼中，每 25% 就改變一次角度，并且總共設定了五個不同的角度，從而創(chuàng)建了一個完整的“吃豆人”動畫效果。