纯CSS3画出小黄人并实现动画效果.docxVIP

OK，大家看一下下面两张图有什么不同：当然，很多人会说，明显大小不同，嘴巴，头发也是不一样的。但是其实最大的不

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

当然，很多人会说，明显大小不同，嘴巴，头发也是不一样的。但是其实最大的不

同是，用一个形象一点的例子就是：这是两个孩子，第一个是从超市货架上拿的，

另外一个是我自己生的。怎么生呢？——用CSS3！

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

前言

前两天我刚发布了一篇CSS3实现小黄人动画的博客，但是实现的CSS3动画是基

前两天我刚发布了一篇CSS3实现小黄人动画的博客，但是实现的CSS3动画是基

于我在站酷网找到的一张小黄人的jpg格式图片，并自己用PS抠出需要实现动画

的部分，最后才完成的动画效果。但是，其实我的初衷是想体验一下用图片做动画

的赶脚，但是找不到素材，才无奈用了最笨的方法来满足自己的需求，本想勉强能

看就行了。可是呢，还是抵不住自己内心的完美，于是乎，用了一个晚上用CSS3

画出了小黄人再实现类似的动画效果。

内容

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

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

divclass=wrapper!--容器--

divclass=littleH!--小黄人--

divclass=bodyH!--身体--

divclass=trousers!--裤子--

divclass=condoleBelt!--吊带--

divclass=left/div

divclass=right/div

/div

divclass=trousers_top/div!--裤子突出的矩形部分--

divclass=pocket/div!--裤袋--

!--三条线--

spanclass=line_left/span

spanclass=line_right/span

spanclass=line_bottom/span

/div

/div

divclass=hair!--头发--

spanclass=left_hair_one/span

spanclass=left_hair_two/span

/div

divclass=eyes!--眼睛--

divclass=leftEye!--左眼--

divclass=left_blackEye

divclass=left_white/div

/div

/div

divclass=rightEye!--右眼--

divclass=right_blackEye

divclass=right_white/div

/div

/div

/div

divclass=mouse!--嘴巴--

divclass=mouse_shape/div

/div

divclass=hands!--双手--

divclass=leftHand/div

divclass=rightHand/div

/div

divclass=feet!--双脚--

divclass=left_foot/div

divclass=right_foot/div

/div

divclass=groundShadow/div!--脚底阴影--

/div

/div

好的，每一处我都标明了它的用途，大家可以稍微理解一下，在头脑里有一个大概的模型或者层次结构。

接下来就是猛料了。。。我将分步讲解，一步一步实现：

首先对容器和整体做一些简单的样式设置：

body{

margin:0;padding:0;

}

.wrapper{

width:300px;margin:100pxauto;

}

.litteH{

position:relative;

}

.bodyH{

position:absolute;width:240px;height:400px;

border:5pxsolid#000;border-radius:115px;background:rgb(249,217,70);overflow:hidden;

z-index:2;

}

其中.bodyH主要就是绘制小黄人的身体，身体的比例很重要，现在运行看一下效果：

OK，身体已经有了，现在赶紧给它穿个裤子吧！

.bodyH.condoleBelt{position:absolute;

}

.bodyH.trousers{position:absolute;bottom:0;

width: