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> <div&bsp;class="rightwing"></div>
<div class="leftsole">
<div class="toe"></div>
</div>
<div class="rightsole">
<div class="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:1s ease;
-moz-transition:1s ease;
-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: 8px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-radius: 50%;
clip: rect(65px 160px 100px 0);
left: 32px;
top: -25px;
-webkit-transition:1s ease;
-moz-transition:1s ease;
-webkit-transition-property:all;
-moz-transition-property:all;
position:absolute;
}
.qq_body:hover .mouth .mark{
height: 30px;
border: 8px solid#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: 0 5px 10px rgba(0, 0, 0, 0.4), 0 0 30px rgba(0, 0, 0, 0.3) inset;
}
.scarf_d {
width: 80px;
height: 110px;
border-radius: 15px 15px 18px 35px;
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: 0 3px 10px rgba(0, 0, 0, 0.4), 0 0 30px rgba(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: 3px solid #872E0C;
box-shadow: 0 0 20px 5px rgba(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: 1px solid #872E0C;
}
.leftsole .toe {
transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
border-left: 3px solid #872E0C;
}
.rightsole .toe {
right: 0;
transform: rotate(20deg);
-moz-transform: rotate(20deg);
-webkit-transform: rotate(20deg);
border-right: 3px solid #872E0C;
}