如何用HTML做一个吃豆人？

首先做一个项目的先想如何去实现它。比如做一个吃豆人，如图：

167b84dcbf0d3ed647b6b8c4abd75f92.jpg

首先，需要分析这个吃豆人的组成部分。
上半部分嘴，下半部分嘴，豆基本就三个部分组成。
其次，怎么才能让它吃豆呢?
需要嘴上下动，需要豆向着嘴的方向移动。

第一步，制作上部分嘴。代码如下：

结果如图：

2017-12-02_193245.png

第二步，下半部分嘴，大部分代码都是一样的。复制粘贴就好。有一点不一样的地方。代码如下：

    #xia{
        width: 0px;
        height: 0px;
        border-bottom: 50px solid yellow;
        border-top: 50px solid yellow;
        border-left: 50px solid yellow;
        border-right: 50px solid transparent;
        border-radius: 50px;
        /*margin:边缘*/
        margin-top: -100px;/*边缘向上60像素，为了与上部分嘴重合*/
    }

第三步，加入动画让嘴动起来。上部分嘴向下动，下部分嘴向上动，形成咬合的动作。代码如下：

第四步，做豆。代码如下：

    #dou{
        width: 20px;/*宽20像素*/
        height: 20px;/*高20像素*/
        position: absolute;/*设置球的绝对位置*/
        top: 50px;/*离顶部50像素*/
        left: 200px;/*离左边200像素*/
        background: yellow;/*背景颜色为黄色*/
        border-radius:50px;/*圆角50像素*/
    }

这样的豆代码复制三个，做成三个豆。

第五步，让豆向嘴的方向动起来。整体代码如下：

注意：豆动画一个新参数，延迟参数。