前言

相信大家都见过或者玩过类似吃豆人的游戏吧，这次我就带大家来实现一个类似于吃豆人的效果，纯CSS实现，效果百分之九十九复刻。话不多说，咱们直接进入主题。

效果预览

相关效果如下。

HTML部分

首先看到HTML部分。相关代码如下。

 
class="pacMan">
      
class="eye">
      
class="mouth1">
      
class="mouth2">
      
class="beanOne">
      
class="beanTwo">
    

这里我们通过HTML代码构造了吃豆人的眼睛，嘴巴，和豆子。这里描述了吃豆人游戏中各个元素的布局。.pacMan这个类代表了整个游戏中Pac-Man角色的容器，包含了眼睛、嘴、豆子等各个元素。.eye代表了Pac-Man角色的眼睛。.mouth1 与 .mouth2分别代表了Pac-Man角色张嘴动作时的两个嘴部元素，可能用于制作张嘴闭嘴的动画效果。.beanOne 与 .beanTwo这两个类代表了吃豆人Pac-Man角色吃到的两颗豆子。

CSS部分

紧接着看到CSS部分。相关代码如下。

这里是构造吃豆人的眼睛和嘴巴的CSS部分。

      .pacMan {
        display: inline-block;
        position: relative;
        margin: 120px;
      }
      /* 使用伪元素创建吃豆人的眼睛 */
      .pacMan::before {
        content: "";
        width: 0.4em;
        height: 0.4em;
        border-radius: 50%;
        background-color: #333;
        position: absolute;
        top: 6px;
        left: 21px;
        z-index: 2000;
      }
      /* mouth1搭配mouth2组成吃豆人张嘴闭嘴的动画 */
      .mouth1 {
        width: 0;
        height: 0;
        border: 25px solid #e1b204;
        border-radius: 50%;
        border-right-color: transparent;
        animation: upup 0.32s 0s infinite;
        position: relative;
        z-index: 3;
      }
      @keyframes upup {
        0% {
          transform: rotate(270deg);
        }
        50% {
          transform: rotate(1turn);
        }
        100% {
          transform: rotate(270deg);
        }
      }
      .mouth2 {
        width: 0;
        height: 0;
        border: 25px solid #e1b204;
        border-right-color: transparent;
        border-radius: 25px;
        margin-top: -50px;
        animation: downdown 0.32s 0s infinite;
        position: relative;
        z-index: 3;
      }
      @keyframes downdown {
        0% {
          transform: rotate(90deg);
        }
        50% {
          transform: rotate(0);
        }
        100% {
          transform: rotate(90deg);
        }
      }

这里描述了一个用于动画效果。在.pacMan中，display: inline-block;：使Pac-Man元素以行内块元素的方式进行显示。position: relative;：设置了相对定位。margin: 120px;：给元素添加了外边距，为了在布局中留出空白。

在.pacMan::before 伪元素中，通过 ::before 伪元素向Pac-Man元素添加了一个小圆，用作眼睛。设置了该元素的宽度、高度、圆角、背景颜色以及绝对定位的位置和 z-index（层级）。

最后就是一个张嘴闭嘴的动画效果，通过 .mouth1 和 .mouth2 类以及相关的 @keyframes 规则定义了Pac-Man元素张嘴闭嘴的动画效果。.mouth1 通过旋转效果实现了Pac-Man张嘴的动画，利用了 border 属性来定义嘴的形状，利用 @keyframes 中的 transform 属性实现了旋转动画。.mouth2 通过类似的方法定义了嘴闭合的动画效果。

这些规则综合起来描述了一个具有眼睛和张嘴闭嘴动画效果的Pac-Man元素。

    /* 豆子不断移动 */
    .beanOne {
      background-color: #e1b204;
      border-radius: 50%;
      width: 10px;
      height: 10px;
      position: absolute;
      transform: translateY(-6px);
      top: 25px;
      left: 100px;
      animation: beanAnimation 1s linear 0.52s infinite;
    }
    .beanTwo {
      background-color: #e1b204;
      border-radius: 50%;
      width: 10px;
      height: 10px;
      position: absolute;
      transform: translateY(-6px);
      top: 25px;
      left: 100px;
      animation: beanAnimation 1s linear 1.1s infinite;
    }
    @keyframes beanAnimation {
      75% {
        opacity: 0.72;
      }
      100% {
        transform: translate(-100px, -6px);
      }
    }  

这里是构造豆子不断移动的CSS部分，这里描述了两个豆子元素（.beanOne 和 .beanTwo）的动画效果。在 .beanOne 和 .beanTwo 类中，设置了这两个元素的共同样式：背景颜色、圆角、宽度、高度、绝对定位的位置和 translateY 变换，使用了 transform 属性将豆子上移了6个像素（transform: translateY(-6px)），定义了每个豆子的初始位置（top: 25px, left: 100px）。

这里的动画定义了豆子的动画效果，其持续时间为1秒，采用线性的时间变化，动画开始的延迟分别为0.52秒和1.1秒。在动画中，豆子会向左平移100px并向上移动6px，使其看起来像是移动过程中遗留下来的痕迹。

总之，这些CSS规则描述了两个豆子的动画效果，使它们在页面上呈现出向左移动并逐渐消失的效果

总结

以上就是整个效果的实现过程了，纯 CSS 实现，代码简单易懂。另外，感兴趣的小伙伴们还可以在现有基础上发散思维，比如增加点其他效果，或者更改颜色等等。关于该效果如果大家有更好的想法欢迎在评论区分享，互相学习。最后，完整代码在码上掘金里可以查看，如果有什么问题大家在评论区里讨论~