吃豆人来袭：CSS打造经典游戏动画，让网页设计更有趣！

<div class="pacManBox">
        <div class="eye"></div>
        <div class="mouthOne"></div>
        <div class="mouthTwo"></div>
        <div class="beansOne"></div>
        <div class="beansTwo"></div>
    </div>

.pacManBox {
            display: inline-block;
            position: relative;
            margin: 120px;
        }
        /* 使用伪元素创建吃豆人的眼睛 */
        .pacManBox::before {
            content: '';
            width: 0.4em;
            height: 0.4em;
            border-radius: 50%;
            background-color: #333;
            position: absolute;
            top: 6px;
            left: 21px;
            z-index: 2000;
        }
        /* mouthOne搭配mouthTwo组成吃豆人张嘴闭嘴的动画 */
        .mouthOne {
            width: 0;
            height: 0;
            border: 25px solid #E1B204;
            border-radius: 50%;
            border-right-color: transparent;
            animation: upup .32s 0s infinite;
            position: relative;
            z-index: 3;
        }
        @keyframes upup {
            0% {
                transform: rotate(270deg);
            }
            50% {
                transform: rotate(1turn);
            }
            100% {
                transform: rotate(270deg);
            }
        }
        .mouthTwo {
            width: 0;
            height: 0;
            border: 25px solid #E1B204;
            border-right-color: transparent;
            border-radius: 25px;
            margin-top: -50px;
            animation: downdown .32s 0s infinite;
            position: relative;
            z-index: 3;
        }
        @keyframes downdown {
            0% {
                transform: rotate(90deg);
            }
            50% {
                transform: rotate(0);
            }
            100% {
                transform: rotate(90deg);
            }
        }
        /* 豆子不断移动 */
        .beansOne {
            background-color: #E1B204;
            border-radius: 50%;
            width: 10px;
            height: 10px;
            position: absolute;
            transform: translateY(-6px);
            top: 25px;
            left: 100px;
            animation: beanAnimation 1s linear .52s infinite;
        }
        .beansTwo {
            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: .72;
            }
            100% {
                transform: translate(-100px, -6px);
            }
        }