HTML+CSS 实现游戏吃豆人.打造经典游戏动画

  先上效果

（动态效果，图示静态而已）

---

🌟CSS吃豆人效果是一种将经典游戏元素融入现代网页设计中的有趣尝试。通过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);
            }
        }

  综上，效果实现了, 后续有什么想要的欢迎大家留言，也可以加喔微信, 18634371151,欢迎~

  往期精彩，可以关注博主看左侧专栏，一定有你需要的！！！

🌟 关注耀南.，探索更多精彩的动画效果！🚀