body {background:#f6f7a7; margin:0;padding:0;}
.cat {width:450px; height:350px; margin:0auto; position:relative;}
.face {width:400px; height:340px;background:#f6f7f2; position:absolute; top:0; left:25px; border-radius:50% 50%35% 35%; overflow: hidden; border:2px solid black; z-index:1;}
.liuhai {position:absolute; height:160px;
width:180px; background:#8D8D8D;
border-radius:0% 0% 50% 50%; overflow:hidden; top:0px; left:110px; z-index:2;
}
.liuhai> div:first-child {width:90px;height:160px; background:#F0AC6B;}
.eyes {width:300px; height:60px;overflow:hidden; position:absolute; top:200px; left:50px; z-index:2;}
.eye {width:100px; height:100px;background:white; border:2px solid black; position:absolute; top:0px; left:0px;border-radius:50% 50% 50% 50%; overflow:hidden; z-index:3;}
.eyerig {content:""; width:100px;height:100px; background:white; border:2px solid black; position:absolute;top:0px; left:196px; border-radius:50% 50% 50% 50%; overflow:hidden;z-index:3;}
.eyeball {width:30px; height:100px;position:absolute; background:black; top:0; left:35px; transition:width 1s,left 1s; z-index:4;}
.cat:hover .eyeball {width:40px;position:absolute; left:30px;}
.eyeballrig {width:30px; height:60px;position:absolute; background:black; top:0; left:35px; transition:width 1s,left 1s; z-index:4;}
.cat:hover .eyeballrig {width:40px;position:absolute; left:30px;}
.eyedown {width:150px; height:100px;border:2px solid black; background:white; position:absolute; top:46px;left:-25px; border-radius:50%; transition:transform 1s; z-index:5;}
.cat:hover .eyedown{transform:translateY(-20px);}
.eyedownrig {width:150px; height:100px;border:2px solid black; background:white; position:absolute; top:46px;right:-25px; border-radius:50%; transition:transform 1s; z-index:5;}
.cat:hover .eyedownrig{transform:translateY(-20px);}
.saihong {width:80px; height:30px;background:red; position:absolute; top:235px; left:60px; z-index:5;border-radius:50%; opacity:0; background-image: -webkit-radial-gradient( 50%50%, rgba(253,214,240,0.8) 0%, rgba(253,224,244,0.8) 66%, rgba(253,234,247,0.8)100%); transition:opacity 0.5s ease-in 0.2s;}
.cat:hover .saihong {opacity:1;}
.saihongrig {width:80px; height:30px;background:red; position:absolute; top:235px; right:60px; z-index:5;border-radius:50%; opacity:0; background-image: -webkit-radial-gradient( 50%50%, rgba(253,214,240,0.8) 0%, rgba(253,224,244,0.8) 66%, rgba(253,234,247,0.8)100%); transition:opacity 0.5s ease-in 0.2s;}
.cat:hover .saihongrig {opacity:1;}
.nose {width:30px; height:36px;position:absolute; top:260px; left:185px; z-index:4; overflow:hidden;}
.nose > div:first-child {width:30px;height:10px; background:black; position:absolute; top:-10px; left:0px;z-index:5; border-radius:0 0 50% 50%; border-bottom:8px solid black;}
.mouse {width:200px; height:36px;position:absolute; top:260px; left:100px; overflow:hidden;}
.mouselef {width:50px; height:40px;border-bottom:4px solid black; border-right:4px solid black; position:absolute;top:-10px; left:48px; border-radius:0% 40% 50% 20%; transition:border-radius1s, width 1s, left 1s;}
.cat:hover .mouselef {border-radius:50% 50%50% 50%; width:40px; left:56px;}
.mouserig {width:50px; height:40px;border-bottom:4px solid black; border-left:4px solid black; position:absolute;top:-10px; left:99px; border-radius:40% 0% 20% 50%; transition:border-radius1s, width 1s;}
.cat:hover .mouserig {border-radius:50% 50%50% 50%; width:40px;}
.huawen {width:380px; height:100px;overflow:hidden; position:absolute; top:190px; left:10px;}
.huawenlef {position:absolute; top:0;left:0px; width:100px; height:100px;}
.huawenlef > div:first-child{width:30px; height:10px; border-top:6px solid #e53941; border-radius:30% 80%20% 50%; position:absolute; top:5; left:20px; transform:rotate(15deg);}
.huawenlef > div:nth-child(2){width:18px; height:8px; background:#e53941; border-radius:50%;position:absolute; top:20; left:25px; transform:rotate(15deg);}
.huawenlef > div:nth-child(3){width:32px; height:10px; border-bottom:4px solid #e53941; border-radius:30% 0%90% 30%; position:absolute; top:25; left:5px; transform:rotate(15deg);}
.huawenlef > div:nth-child(4){width:32px; height:10px; border-bottom:4px solid #e53941; border-radius:30% 0%90% 30%; position:absolute; top:65; left:25px; transform:rotate(10deg);}
.huawenlef > div:nth-child(5){width:25px; height:10px; border-bottom:3px solid #e53941; border-radius:0% 0%50% 50%; position:absolute; top:75; left:45px; transform:rotate(-10deg);}
.huawenrig {position:absolute; top:0; right:0px;width:100px; height:100px;}
.huawenrig > div:first-child{width:30px; height:10px; border-top:6px solid #e53941; border-radius:80% 30%50% 20%; position:absolute; top:5; right:20px; transform:rotate(-15deg);}
.huawenrig > div:nth-child(2) {width:18px;height:8px; background:#e53941; border-radius:50%; position:absolute; top:20;right:25px; transform:rotate(-15deg);}
.huawenrig > div:nth-child(3){width:32px; height:10px; border-bottom:4px solid #e53941; border-radius:0% 30%30% 90%; position:absolute; top:25; right:5px; transform:rotate(-15deg);}
.huawenrig > div:nth-child(4){width:32px; height:10px; border-bottom:4px solid #e53941; border-radius:0% 30%30% 90%; position:absolute; top:65; right:25px; transform:rotate(-10deg);}
.huawenrig > div:nth-child(5){width:25px; height:10px; border-bottom:3px solid #e53941; border-radius:0% 0%50% 50%; position:absolute; top:75; right:45px; transform:rotate(10deg);}
.ear {width: 480px; height: 120px;position: absolute; top:0px; left:0px;}
.earlef {width:200px; height:160px;background:#f6f7f2; border:2px solid black; position:absolute; top:10px;left:30px; border-radius:4% 80% 0% 50%; transform: rotate(-15deg);transition:transform 1s;}
.cat:hover .earlef {transform:rotate(0deg);}
.earrig {width:200px; height:160px;background:#f6f7f2; border:2px solid black; position:absolute; top:10px;right:30px; border-radius:80% 4% 50% 0%; transform: rotate(15deg);transition:transform 1s;}
.cat:hover .earrig {transform:rotate(0deg);}
<body>
<div class="cat">
<div class="face">
<div class="liuhai">
<div></div>
</div>
<div class="eyes">
<div class="eye">
<div class="eyeball"></div>
</div>
<div class="eyerig">
<div class="eyeballrig"></div>
</div>
<div class="eyedown"></div>
<div class="eyedownrig"></div>
</div>
<div class="saihong"></div>
<div class="saihongrig"></div>
<div class="nose"><div></div></div>
<div class="mouse">
<div class="mouselef"></div>
<div class="mouserig"></div>
</div>
<div class="huawen">
<divclass="huawenlef">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<divclass="huawenrig">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
<div class="ear">
<div class="earlef"></div>
<div class="earrig"></div>
</div>
</div>
</body>