吃豆人html代码原理,如何用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像素*/

}

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

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