纯CSS3动画实现小黄人

先上效果：

http://2.danielcv.sinaapp.com/sae/minimon/index.html

要实现这个效果其实并不难，主要是对一些CSS3特性的实质性应用，比如transform，transition还有relative，absolute定位的使用方法，

在搭建好

<div class="wrapper">
<div class="littleH">
<div class="bodyH">
<div class="trousers">
<div class="condoleBelt">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="trousers_top"></div>
<div class="pocket"></div>
<span class="line_left"></span>
<span class="line_right"></span>
<span class="line_bottom"></span>
</div>
</div>
<div class="hair">
<span class="left_hair_one"></span>
<span class="left_hair_two"></span>
</div>
<div class="eyes">
<div class="leftEye">
<div class="left_blackEye">
<div class="left_white"></div>
</div>
</div>
<div class="rightEye">
<div class="right_blackEye">
<div class="right_white"></div>
</div>
</div>
</div>
<div class="mouth">
<div class="mouth_shape"></div>
</div>
<div class="hands">
<div class="leftHand"></div>
<div class="rightHand"></div>
</div>
<div class="feet">
<div class="left_foot"></div>
<div class="right_foot"></div>
</div>
<div class="groundShadow"></div>
</div>
</div>

按照，身体，裤子，头发，眼睛，嘴巴，手，脚搭建好这样一个html框架后，就可以着手书写css代码了。

CSS方面，这里就节选一段做说明吧，比如

.littleH{
position: relative;
}
.bodyH{
position: absolute;
width: 240px;
height: 400px;
border: 5px solid #000;
border-radius: 115px;
background: rgb(249,217,70);
overflow: hidden;
z-index: 2;
}

我们知道，absolute是根据最近的相对定位来进行定位的，所以，在需要用absolute定位的地方，我们需要在它的父元素先定义relative定位，不然

它就会默认去找离它最近的relative定位元素甚至body来做参考。接下来就是用top和left来定位的问题了。

另一个要点在于对伪元素的运用，比如眼睛这里：

.eyes{
position: relative;
}
.leftEye{
width: 60px;
height: 60px;
border-radius: 60px;
border: 5px solid #000;
background: #fff;
position: absolute;
top: 60px;
left: 40px;
z-index: 5;
}
.left_blackEye{
width: 30px;
height: 30px;
border-radius:30px;
background: #000;
position: absolute;
top: 15px;
left: 15px;
z-index: 5;
}
.leftEye:after{
content: "";
width: 40px;
height: 20px;
background: #000;
position: absolute;
z-index: 5;
top: 20px;
left: -40px;
}
.left_white{
width: 15px;
height: 15px;
border-radius:15px;
background: #fff;
position: absolute;
top: 0px;
left:10px;
z-index: 5;
}

.leftEye:after就是一个伪元素，通过伪元素来修饰内容，而无需添加额外的标签，这里也顺便复习了一下。
再一个就是对keyframes的运用了
还是以眼睛为例，要添加一个keyframes动画

.eyes .leftEye .left_blackEye .left_white,
.eyes .rightEye .right_blackEye .right_white{
-webkit-animation: whiteeye 5s ease-in-out infinite;
}

首先需要对选择的元素表明使用animation属性，animation属性有几个值，分别是动画名称（必填），动画时间（必填），动画效果，和动画播放的次数（

infinite表示无限循环播放）
然后就可以写动画名称对应的动画了

@-webkit-keyframes whiteeye{
0%,20%,50%,70%,100%{
-webkit-transform: translateX(0px);
}
30%,40%{
-webkit-transform: translate3d(3px,5px,0);
}
80%,90%{
-webkit-transform: translate3d(-8px,5px,0);
}
}

这里定义了在不同时间要做的东西。

以上总结了做一个这样的css3动画需要的一些知识，对我来说相当是一次归纳总结，温故知新，希望也能帮到其他人吧~！