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

.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)建一個(gè) CSS 吃豆人效果的方塊。通過給這個(gè)方塊添加chi-dou-ren類名，并且為這個(gè)類名添加動(dòng)畫效果，就可以讓這個(gè)方塊動(dòng)起來(lái)了。

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