CSS作為前端開發(fā)中的重要組成部分，可以實現(xiàn)各種有趣的動畫效果。本文將為大家介紹一種CSS制作的經(jīng)典動畫特效——吃豆人。

首先，我們需要一個基本的HTML結構：

<div class="pacman-container">
<div class="pacman"></div>
</div>

接下來，我們需要使用CSS將這個HTML結構變成一個吃豆人動畫特效。

首先，定義一個圓形div作為吃豆人的身體，并且使用border-radius使其變?yōu)閳A形：

.pacman {
display: block;
position: relative;
width: 60px;
height: 60px;
background-color: yellow;
border-radius: 50%;
}

然后，我們需要在身體上定義一個弧形的嘴巴，使用border-radius和transform屬性可以實現(xiàn)這個效果：

.pacman::before,
.pacman::after {
content: '';
position: absolute;
width: 0;
height: 0;
border-radius: 50%;
background-color: #222;
transform-origin: center center;
}
.pacman::before {
top: 0;
left: 0;
border-top: 30px solid transparent;
border-right: 60px solid #222;
transform: rotate(-45deg);
}
.pacman::after {
bottom: 0;
right: 0;
border-bottom: 30px solid transparent;
border-left: 60px solid #222;
transform: rotate(45deg);
}

最后，我們需要定義一個動畫來移動吃豆人的嘴巴，讓其看起來像是在吃豆子。我們可以通過animation來實現(xiàn)：

@keyframes chomp {
0% { transform: rotate(-45deg); }
17.5% { transform: rotate(0deg); }
50% { transform: rotate(0deg); }
67.5% { transform: rotate(45deg); }
100% { transform: rotate(-45deg); }
}
.pacman {
animation: chomp 0.8s infinite;
animation-timing-function: steps(3);
}

通過以上的代碼，我們就可以實現(xiàn)一個簡單的吃豆人動畫特效了。當然，我們還可以對其進行更多的優(yōu)化和改進，例如加入眼睛、吃豆子等等。