效果就像这样：
不废话，直接上代码！
hrml代码：
XML/HTML Code复制内容到剪贴板 <!DOCTYPEhtml> <html> <headlang="zh"> <metacharset="UTF-8"> <title>纯CSS3画出小黄人并实现动画效果</title> <Linkhref="index.css"type="text/css"rel="stylesheet"/> </head> <body> <> <divclass="wrapper"> <> <divclass="container"> <> <divclass="hairs"> <divclass="hairs_one"></div> <divclass="hairs_two"></div> </div> <> <> <divclass="eyes"> <divclass="eye_left"> <divclass="black"> <divclass="white"></div> </div> </div> <divclass="eye_right"> <divclass="black"> <divclass="white"></div> </div> </div> </div> <> <> <divclass="mouth"> <divclass="mouth_box"></div> </div> <> <> <divclass="hands"> <divclass="left_hand"></div> <divclass="right_hand"></div> </div> <> <> <divclass="mybody"> <> <divclass="trousers"> <> <divclass="trousers_top"></div> <> <divclass="pocket"></div> <> <divclass="line-left"></div> <divclass="line-right"></div> <divclass="line-bottom"></div> <> <divclass="condoleBelt"> <divclass="left"></div> <divclass="right"></div> </div> </div> <> </div> <> <> <divclass="foot"> <divclass="left_foot"></div> <divclass="right_foot"></div> </div> <> <> <divclass="foot_shadow"></div> <> </div> </div> </body> </html>
css代码：
CSS Code复制内容到剪贴板 body{ margin:0; padding:0; } .wrapper{ width:300px; margin:100pxauto; } .container{ position:relative; } .container.mybody{ position:absolute; width:240px; height:400px; border:5pxsolid#000; border-radius:115px; background:#f9d946; overflow:hidden; z-index:2; } .container.mybody.trousers{ position:absolute; bottombottom:0; width:100%; height:100px; border-top:6pxsolid#000; background:#2074a0; } .container.mybody.trousers.trousers_top{ width:160px; height:60px; background:#2074a0; position:absolute; bottombottom:100px; left:0; rightright:0; margin:0auto; border:6pxsolid#000; border-bottom:none; } .container.mybody.trousers.pocket{ width:60px; height:45px; border:6pxsolid#000; border-radius:0025px25px; left:0; rightright:0; margin:0auto; position:absolute; bottombottom:65px; } .container.mybody.trousers.line-left, .container.mybody.trousers.line-rightright{ width:30px; height:30px; border-bottom-rightright-radius:100px; border-right:6pxsolid; border-bottom:6pxsolid; position:absolute; top:10px; } .container.mybody.trousers.line-rightright{ rightright:0; -webkit-transform:rotate(75deg); -moz-transform:rotate(75deg); -o-transform:rotate(75deg); transform:rotate(75deg); -ms-transform:rotate(75deg); } .container.mybody.trousers.line-bottombottom{ height:40px; border:3pxsolid#000; left:118px; position:absolute; bottombottom:0; border-radius:3px; } .container.mybody.trousers.condoleBelt{ position:absolute; } .container.mybody.trousers.condoleBelt.left, .container.mybody.trousers.condoleBelt.rightright{ width:100px; height:16px; border:5pxsolid#000; background:#2074a0; top:-90px; position:absolute; } .container.mybody.trousers.condoleBelt.left:after, .container.mybody.trousers.condoleBelt.rightright:after{ content:''; background:#000; width:8px; height:8px; border-radius:50%; position:absolute; top:3px; } .container.mybody.trousers.condoleBelt.left{ left:-35px; transform:rotate(45deg); } .container.mybody.trousers.condoleBelt.left:after{ rightright:3px; } .container.mybody.trousers.condoleBelt.rightright{ transform:rotate(-45deg); left:165px; } .container.mybody.trousers.condoleBelt.rightright:after{ left:3px; } .container.hairs{ position:relative; } .container.hairs.hairs_one{ width:130px; height:100px; border-top:8pxsolid#000; position:absolute; transform:rotate(35deg); left:24px; top:-17px; border-radius:50%; animation:hairs2sease-in-outinfinite; } .container.hairs.hairs_two{ width:80px; height:80px; border-top:6pxsolid#000; position:absolute; transform:rotate(15deg); left:50px; top:-10px; border-radius:50%; } .container.eyes{ position:relative; z-index:3; } .container.eyes.eye_left, .container.eyes.eye_right{ width:85px; height:85px; border:6pxsolid#000; border-radius:50%; background:#fff; position:absolute; top:60px; } .container.eyes.eye_left:after, .container.eyes.eye_right:after{ content:''; width:28px; height:18px; background:#000; position:absolute; top:40%; } .container.eyes.eye_left{ left:27px; } .container.eyes.eye_left:after{ left:-30px; transform:rotate(7deg)skewX(20deg); } .container.eyes.eye_right{ left:124px; } .container.eyes.eye_right:after{ rightright:-32px; transform:rotate(-7deg)skewX(-20deg); } .container.eyes.black{ width:40px; height:40px; background:#000; border-radius:50%; position:absolute; top:24px; left:22px; animation:eys_black5sease-in-outinfinite; } .container.eyes.white{ width:20px; height:20px; background:#fff; border-radius:50%; position:absolute; top:10px; left:10px; animation:eys_white5sease-in-outinfinite; } .container.mouth{ position:relative; z-index:3; } .container.mouth.mouth_box{ position:absolute; width:55px; height:35px; border:5pxsolid#000; background:#fff; top:170px; left:90px; border-bottom-left-radius:30px; transform:rotate(-35deg); animation:mouth_box5sease-in-outinfinite; } .container.mouth.mouth_box:after{ background:#f9d946; width:70px; height:32px; content:''; position:absolute; border-bottom:5pxsolid#000; transform:rotate(35deg); top:-14px; left:6px; animation:mouth_after5sease-in-outinfinite; } .container.hands{ position:relative; z-index:1; } .container.hands.left_hand, .container.hands.right_hand{ width:80px; height:80px; border:6pxsolid#000; transform:rotate(40deg); position:absolute; background:#f9d946; border-radius:30px; top:220px; animation:left_hand1sease-in-outinfinite; } .container.hands.left_hand{ left:-24px; } .container.hands.left_hand:after{ width:6px; border:3pxsolid#000; position:absolute; content:''; transform:rotate(90deg); bottombottom:26px; left:12px; } .container.hands.right_hand{ rightright:26px; } .container.hands.right_hand:after{ width:6px; border:3pxsolid#000; position:absolute; content:''; top:20px; rightright:18px; } .container.foot{ position:relative; } .container.foot.left_foot, .container.foot.right_foot{ width:36px; height:50px; background:#000; position:absolute; top:400px; } .container.foot.left_foot:after, .container.foot.right_foot:after{ width:60px; height:35px; position:absolute; bottombottom:0; content:''; background:#000; } .container.foot.left_foot{ left:86px; animation:left_foot1sease-in-outinfinite; } .container.foot.left_foot:after{ rightright:0; top:20px; border-radius:30px010px20px; } .container.foot.right_foot{ left:128px; animation:right_foot1sease-in-outinfinite; } .container.foot.right_foot:after{ left:0; top:20px; border-radius:030px20px10px; } .container.foot_shadow{ position:absolute; top:456px; width:240px; height:2px; background:rgba(0,0,0,0.3); box-shadow:002px4pxrgba(0,0,0,0.3); border-radius:50%; } @keyframeshairs{ 30%{ transform:rotate(32deg)translate3d(-4px,-2px,0); } } @keyframeseys_black{ 0%{ transform:translateX(0px); } 20%, 40%{ transform:translateX(15px); } 60%, 100%{ transform:translateX(0px); } 80%, 90%{ transform:translateX(-15px); } } @keyframeseys_white{ 0%{ transform:translateX(0px); } 20%, 40%{ transform:translate3d(3px,4px,0px); } 60%{ transform:translate(5px,5px); } 80%{ transform:translateX(0px); } 100%{ transform:translateX(0px); } } @keyframesmouth_box{ 40%, 43%{ width:45px; height:25px; top:175px; } 0%, 35%, 48%, 100%{ width:55px; height:35px; top:170px; transform:rotate(-35deg); } } @keyframesmouth_after{ 40%, 43%{ width:60.5px; top:-19.3px; left:1.5px; } 0%, 35%, 48%, 100%{ width:70px; top:-16px; left:3px; transform:rotate(33deg); } } @keyframesleft_hand{ 0%, 50%, 100%{ transform:rotate(40deg); } 30%{ transform:rotate(37deg)translateX(1px); } } @keyframesright_foot{ 0%, 50%, 100%{ transform:rotate(0deg); } 30%{ transform:rotate(-8deg); } } @keyframesleft_foot{ 0%, 50%, 100%{ transform:rotate(0deg); } 80%{ transform:rotate(8deg); } }
搞定了，没有做浏览器兼容，建议在chrome下浏览，以上就是本文的全部内容，希望对大家的学习有所帮助。
原文：http://www.cnblogs.com/zhangans/p/4883705.html
【纯CSS3打造属于自己的“小黄人”】相关文章：
★ 纯CSS无表达式实现未知尺寸图片等比缩放(支持IE7及以上)