标签：
先上效果：
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动画需要的一些知识，对我来说相当是一次归纳总结，温故知新，希望也能帮到其他人吧~！
标签：
原文地址：http://www.cnblogs.com/danielweb/p/4733802.html
