1、效果图：
2、设计思想：
（1）整个QQ企鹅有头部、左眼、右眼、嘴部、围巾、肚子、左手、右手、左脚、右脚十个部分。
（2）
头部部分里面包含了左右眼和嘴部；
：左右眼里面有三层元素：眼睛的底色部分、眼睛的黑色瞳孔、以及眼白。
：嘴部部分里面包含有嘴唇。
（3）
：围巾元素有两个部分，一个是围在脖子上的围巾，一个是肚子上的一部分。
左右手部分 是贴在肚子上的，使用的定位方式是absolut。
：左右脚有两个部分：一是：
下脚掌；一是：
上脚掌。
（4）在鼠标移动到QQ企鹅卡通形象时，QQ企鹅的嘴巴会消失，眼睛会变小，
，这 里使用的是CSS中的Transition，设置的过渡时间是1s。
3、实验总结：
只使用css进行卡通动画设计时，首先需要做的是先分析出卡通形象由哪些部分组成，在HTML部分中写出这些部分的标签，然后再css中对这些标签进行调整，呈现出比较好的卡通象。需要学好基础知识，并且熟悉的掌握。
4、代码
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>QQ企鹅</title><linkrel="stylesheet"href="kt.css"></head><body><divclass="qq_body"><divclass="head"></div><divclass="bowknot"><divclass="bowknot_l"><divclass="bowknot_line3"></div><divclass="bowknot_line4"></div></div><divclass="bowknot_c"></div><divclass="bowknot_tip_l"></div><divclass="bowknot_tip_r"></div></div><divclass="lefteye"><divclass="eyeshadowwhite"></div><divclass="eyeball"><divclass="eyewhite"></div></div></div><divclass="righteye"><divclass="eyeshadow"></div><divclass="eyeshadowwhite"></div><divclass="eyeball"><divclass="eyewhite"></div></div></div><divclass="mouth_box"><divclass="mouth"><divclass="mark"></div></div></div><divclass="belly"><divclass="belly_white"></div></div><divclass="scarf"></div><divclass="scarf_d"></div><divclass="leftwing"></div><divclass="rightwing"></div><divclass="leftsole"><divclass="toe"></div></div><divclass="rightsole"><divclass="toe"></div></div></div></body></html>CSS：*{margin:0;padding:0;}div{position:absolute;}.qq_body{width:470px;height:540px;left:500px;top:100px;}/*QQ头部*/.head{z-index:0;left:65px;top:0;width:345px;height:367px;background:#19161A;border-radius:50%;}/*QQ眼睛*/.lefteye,.righteye{width:66px;height:99px;border-radius:50%;background:#fff;left:153px;top:76px;z-index:7;overflow:hidden;-webkit-transition:1sease;-moz-transition:1sease;-webkit-transition-property:all;-moz-transition-property:all;position:absolute;}.qq_body:hover.lefteye{width:85px;height:50px;border-radius:40%60%40%/60%60%40%;background:#fff;top:85px;}.qq_body:hover.righteye{width:85px;height:50px;border-radius:40%60%40%/60%60%40%;background:#fff;top:85px;}.eyeball{width:30px;height:42px;background:#201E1F;border-radius:50%;left:28px;top:34px;}.eyeball.eyewhite{width:11px;height:18px;background:#fff;border-radius:50%;left:12px;top:12px;}.righteye{left:245px;}.righteye.eyeball{left:11px;}.eyeshadowwhite{width:65px;height:54px;border-radius:50%;background:rgba(255,255,255,1);top:20px;}/*QQ嘴巴*/.mouth_box{width:344px;height:188px;top:102px;left:66px;border-radius:50%;z-index:6;background:#19161A;}.mouth{width:234px;height:70px;border-radius:50%;background:#FC9202;left:52px;bottom:35px;}.mouth.mark{width:160px;height:84px;border:8pxsolid#000;border-left:1pxsolid#000;border-right:1pxsolid#000;border-radius:50%;clip:rect(65px160px100px0);left:32px;top:-25px;-webkit-transition:1sease;-moz-transition:1sease;-webkit-transition-property:all;-moz-transition-property:all;position:absolute;}.qq_body:hover.mouth.mark{height:30px;border:8pxsolid#000;}/*QQ身体*/.belly{width:385px;height:322px;left:45px;top:185px;z-index:1;background:#19161A;border-radius:50%;}.belly_white{width:315px;height:250px;background:#fff;border-radius:50%;left:34px;bottom:10px;}/*QQ围巾*/.scarf{width:355px;height:198px;background:red;border-radius:50%;z-index:5;left:60px;top:155px;box-shadow:05px10pxrgba(0,0,0,0.4),0030pxrgba(0,0,0,0.3)inset;}.scarf_d{width:80px;height:110px;border-radius:15px15px18px35px;background:red;left:110px;top:325px;transform:rotate(15deg);-moz-transform:rotate(15deg);-webkit-transform:rotate(15deg);-o-transform:rotate(15deg);z-index:4;box-shadow:03px10pxrgba(0,0,0,0.4),0030pxrgba(0,0,0,0.3)inset;}/*QQ翅膀*/.leftwing,.rightwing{width:50px;height:170px;background:#1A1624;border-radius:50%;top:270px;}.leftwing{left:10px;transform:rotate(25deg);-moz-transform:rotate(25deg);-webkit-transform:rotate(25deg);-o-transform:rotate(25deg);}.rightwing{right:10px;transform:rotate(-25deg);-moz-transform:rotate(-25deg);-webkit-transform:rotate(-25deg);-o-transform:rotate(-25deg);}/*QQ脚掌*/.leftsole,.rightsole{width:157px;height:82px;background:#F07203;top:455px;border-radius:50%;border:3pxsolid#872E0C;box-shadow:0020px5pxrgba(0,0,0,0.3);}.leftsole{left:55px;transform:rotate(-5deg);-moz-transform:rotate(-5deg);-webkit-transform:rotate(-5deg);}.rightsole{right:55px;transform:rotate(5deg);-moz-transform:rotate(5deg);-webkit-transform:rotate(5deg);}.leftsole.toe,.rightsole.toe{width:60px;height:22px;background:#F07203;border-radius:50%;border-top:1pxsolid#872E0C;}.leftsole.toe{transform:rotate(-20deg);-moz-transform:rotate(-20deg);-webkit-transform:rotate(-20deg);border-left:3pxsolid#872E0C;}.rightsole.toe{right:0;transform:rotate(20deg);-moz-transform:rotate(20deg);-webkit-transform:rotate(20deg);border-right:3pxsolid#872E0C;}
如果觉得《css3 qq企鹅动画》对你有帮助，请点赞、收藏，并留下你的观点哦！
