用html和css制作小黄人,纯CSS3画出小黄人并实现动画效果

原标题：纯CSS3画出小黄人并实现动画效果

作者：郭锦荣

www.cnblogs.com/jr1993/p/4658772.html

前言

前两天我刚发布了一篇CSS3实现小黄人动画的博客，但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片，并自己用PS抠出需要实现动画的部分，最后才完成的动画效果。但是，其实我的初衷是想体验一下用图片做动画的赶脚，但是找不到素材，才无奈用了最笨的方法来满足自己的需求，本想勉强能看就行了。可是呢，还是抵不住自己内心的完美，于是乎，用了一个晚上用CSS3画出了小黄人再实现类似的动画效果。

正题

OK，大家看一下下面两张图有什么不同：

当然，很多人会说，明显大小不同，嘴巴，头发也是不一样的。但是其实最大的不同是，用一个形象一点的例子就是：这是两个孩子，第一个是从超市货架上拿的，另外一个是我自己生的。怎么生呢？——用CSS3！

那么生下来得会动啊，不然就夭折了，所以，我就多拍了几个，就变成这样子了：

怎么样？虽然手脚动画还是不怎么神似，但人类聪明地大脑还是能看得出啥意思的吧！今天就让我们一起学习如何生出一个小黄人来。

首先，还是直接把HTML结构放出来给大家打量打量：