今天小编跟大家讲解下有关CSS3实现可爱的小黄人动画 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS3实现可爱的小黄人动画 的相关资料，希望小伙伴们看了有所帮助。
每次看到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
来源：爱蒂网
