每次看到CSS3动画就心痒痒想试一下，记得一个多月前看了白树哥哥的一篇博客，突然开窍，于是拿他提供的demo试了一下，感觉很棒！下图为demo提供的动画帧设计稿。
自己也想说搞一个DIY的动画出来，可是，会PS不一定会设计啊，我搞不出一套动画设计稿出来啊【抓狂】….于是乎，去了站酷网找找素材，我果然还是太天真了，最后从心只找到了一张图：
联想到我要做CSS3动画，呵呵……怎么办 ? ——没办法，抠呗！（此处勿喷，着实无素材）
……最后效果变成这样子,这是移动端的例子！(gif图有卡顿现象，请凑合看吧,非喜勿喷…)：
OK,其实主要目的还是知识点的学习吧：
这个demo涉及的知识点有：
perspective
perspective-origin
transform-style
transform-origin
animation
@keyframes
translate3d,translateX，rotateY….
这些知识点有些涉及css3d动画，各个知识点的具体详解我就不解释了，有兴趣可以到这里了解一下：http://isux.tencent.com/css3/index.html
回到这个案例，话说这么挫的动画是怎么具体实现的呢？ 我将分享代码给大家练习：
html结构：
XML/HTML Code复制内容到剪贴板
<body><divclass="title"><p>小黄人</p></div><divclass="wrapper"><divclass="littleH"><divclass="light"><divclass="light_left"><p>欢迎欢迎，热烈欢迎</p></div><divclass="light_right"><p>欢迎欢迎，热烈欢迎</p></div><divclass="load"></div></div><divclass="littleH_body"><divclass="leftHair"></div><divclass="rightHair"></div><divclass="leftBlackeye"></div><divclass="leftWhiteeye"></div><divclass="rightBlackeye"></div><divclass="rightWhiteeye"></div><divclass="mouse"></div><divclass="leftFoot"></div><divclass="rightFoot"></div></div></div></div></body>css代码：
CSS Code复制内容到剪贴板
body{margin:0;padding:0;width:100%;height:100%;}.titlep{text-align:center;font-size:100px;font-weight:bolder;color:#333;}.wrapper{margin:400pxauto;}.littleH{position:relative;-webkit-perspective:800;-webkit-perspective-origin:50%50%;}.light{-webkit-transform-style:preserve-3d;}.light.light_left,.light.light_right{position:absolute;width:100%;height:300px;background:lightblue;-webkit-transform:rotateY(90deg)translate3d(0,300px,-200px);-webkit-animation:changeBgColor2slinearinfinite;}.light.light_right{-webkit-transform:rotateY(-90deg)translate3d(0,300px,-215px);-webkit-animation-delay:1s;}@-webkit-keyframeschangeBgColor{0%,100%{background:lightblue;}50%{background:lightgreen;}}.light.light_leftp,.light.light_rightp{color:#fff;font-size:80px;font-weight:bold;margin-left:100px;}.light.light_rightp{float:rightright;margin-right:100px;}.light.load{position:absolute;width:500px;height:1500px;background:-webkit-gradient(linear,lefttop,leftbottombottom,color-stop(51%,#aadbdc),color-stop(52%,#ffffff));background:-webkit-linear-gradient(top,#aadbdc51%,#ffffff52%);background:linear-gradient(tobottombottom,#aadbdc51%,#ffffff52%);background-size:350px80px;-webkit-animation:move_load5slinearinfinite;}@-webkit-keyframesmove_load{0%{-webkit-transform:rotateX(90deg)translate3d(250px,0,0);}100%{-webkit-transform:rotateX(90deg)translate3d(250px,-320px,0);}}.littleH_body{position:absolute;left:50%;margin-left:-157px;width:314px;height:425px;background:url(1.png);-webkit-transform-style:preserve-3d;}.leftHair{position:absolute;rightright:58px;top:-5px;width:100px;height:17px;background:url(lefthair.png);-webkit-transform-origin:leftbottombottom;-webkit-animation:lefthair1s.3sease-in-outinfinite;}@-webkit-keyframeslefthair{0%,10%,40%,100%{-webkit-transform:rotate(0deg)translateY(1px);}30%{-webkit-transform:rotate(-3deg)translateY(1px);}}.rightHair{position:absolute;left:58px;top:-8px;width:100px;height:16px;background:url(righthair.png);-webkit-transform-origin:rightrightbottombottom;-webkit-animation:righthair1sease-in-outinfinite;}@-webkit-keyframesrighthair{0%,10%,40%,100%{-webkit-transform:rotate(0deg)translateY(1px);}30%{-webkit-transform:rotate(4deg)translateY(1px);}}.leftBlackeye{position:absolute;rightright:87px;top:102px;width:43px;height:43px;background:url(eyeblack.png);-webkit-animation:leftblackeye5sease-ininfinite;}@-webkit-keyframesleftblackeye{0%,20%,50%,70%,100%{-webkit-transform:translateX(0px);}30%,40%{-webkit-transform:translateX(15px);}80%,90%{-webkit-transform:translateX(-15px);}}.leftWhiteeye{position:absolute;rightright:92px;top:110px;width:20px;height:21px;background:url(whiteeye.png);background-size:95%95%;background-repeat:no-repeat;-webkit-animation:leftwhiteeye5sease-ininfinite;}@-webkit-keyframesleftwhiteeye{0%,20%,50%,70%,100%{-webkit-transform:translateX(0px);}30%,40%{-webkit-transform:translate3d(15px,3px,0);}80%,90%{-webkit-transform:translate3d(-30px,3px,0);}}.rightBlackeye{position:absolute;left:84px;top:102px;width:43px;height:43px;background:url(eyeblack.png);-webkit-animation:rightblackeye5sease-ininfinite;}@-webkit-keyframesrightblackeye{0%,20%,50%,70%,100%{-webkit-transform:translateX(0px);}30%,40%{-webkit-transform:translateX(15px);}80%,90%{-webkit-transform:translateX(-15px);}}.rightWhiteeye{position:absolute;left:102px;top:112px;width:20px;height:21px;background:url(whiteeye.png);background-size:95%95%;background-repeat:no-repeat;-webkit-animation:rightwhiteeye5sease-ininfinite;}@-webkit-keyframesrightwhiteeye{0%,20%,50%,70%,100%{-webkit-transform:translateX(0px);}30%,40%{-webkit-transform:translate3d(15px,3px,0);}80%,90%{-webkit-transform:translate3d(-30px,3px,0);}}.mouse{position:absolute;left:126px;top:210px;width:71px;height:30px;background:url(mouse.png);-webkit-transform-origin:centertop;-webkit-animation:mouse5sease-in-outinfinite;}@-webkit-keyframesmouse{40%{-webkit-transform:rotate(-15deg)translateX(22px);}0%,20%,60%,100%{-webkit-transform:rotate(0deg);}}.leftFoot{position:absolute;rightright:85px;top:424px;width:68px;height:43px;background:url(leftfoot.png);-webkit-transform-origin:lefttop;-webkit-animation:leftfoot.6sease-in-outinfinite;}@-webkit-keyframesleftfoot{0%,50%,100%{-webkit-transform:rotate(0deg);}80%{-webkit-transform:rotate(-10deg);}}.rightFoot{position:absolute;left:85px;top:424px;width:68px;height:43px;background:url(rightfoot.png);margin-bottom:100px;-webkit-transform-origin:rightrighttop;-webkit-animation:rightfoot.6sease-in-outinfinite;}@-webkit-keyframesrightfoot{0%,50%,100%{-webkit-transform:rotate(0deg);}30%{-webkit-transform:rotate(10deg);}}代码应该还是很简单就能看懂的，不足之处在于图片没有合并，就凑合吧，主要目的还是对CSS3动画（特别是3d）知识点的学习及实践。多练习，才能记得更牢，用得更顺，这只是开始……
PS：附上我抠的图片
1.png
righthair.png
lefthair.png
eyeblack.png
whiteeye.png
mouse.png
rightfoot.png
leftfoot.png
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
原文链接：http://www.cnblogs.com/jr1993/p/4654622.html
