![Uploading g_733644.png . . .]
](http://upload-images.jianshu.io/upload_images/4115081-2a9fc7bd7a523f33.gif?imageMogr2/auto-orient/strip)

一、耳朵通過將div四個角變成不同角度的圓角之后再使用transform:rotate進(jìn)行旋轉(zhuǎn)

border-radius: 4% 80% 0% 50%;
transform: rotate(-15deg);

鼠標(biāo)放上去之后使旋轉(zhuǎn)的角度更大。

.mao:hover .erduo
> div:first-child{transform: rotate(0deg);}

![Uploading b_383021.png . . .]

b.png

二、臉部花紋通過將兩個div改變圓角之后填充不同的顏色,再用定位實(shí)現(xiàn)

border-radius: 0% 0% 50% 50%;
background: #8D8D8D;
background: #F0AC6B;

c.png

三、眼睛通過將兩個div改變圓角之后拼接出來一個眼睛得輪廓,再在里面放一個div填充成藍(lán)色作為瞳孔,鼠標(biāo)經(jīng)過時改變相應(yīng)的樣式實(shí)現(xiàn)動畫

d.png

/*左眼*/
.yanquan {height: 100px;width: 100px;border: 2px solid #2e2e2e;border-radius: 50% 50% 50% 50%;overflow: hidden;position: absolute;}
    /*眼珠子 左*/
    .yanquan > div:first-child {height: 100px;width: 30px;background-color: #1496bb;margin-left: 35px;transition:all 1s;}
.mao:hover .yanquan > div:first-child { width:40px;margin-left: 30px; /*transition:all 1s;*/}
.yanquan_hedding {height: 100px;width: 180px;border-top: 2px solid #2e2e2e;border-radius: 50% 50% 50% 50%;background: #F6F7F2;
    margin-top: 50px;margin-left: -40px;position: absolute;transition: margin-top 1s;}
.hong {position: absolute;height: 28px;width: 70px;background: red;top: 34px;/*top: 64px;*/left: 18px;border-radius: 50% 50% 50% 50%;
    background-image: -moz-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%);
    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%);
    background-image: -ms-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%);
    opacity: 0.0; }
.yan_right {left: 196px;top: 0px;background: red;position: absolute;}/*眼睛浮動屬性*/
.mao:hover .yanquan_hedding {margin-top: 30px;/*transition: margin-top 1s;*/}
.mao:hover .hong {/*top: 34px;*/ opacity: 0.8;transition: opacity 0.5s ease-in 0.2s;}

四、腮紅是在鼠標(biāo)經(jīng)過時改變透明度
五、胡子先改變div圓角,然后填充背景顏色,再定位實(shí)現(xiàn)

e.png

六、嘴巴是將兩個div的圓角動態(tài)改變,div不填充背景顏色,只寫邊框,然后再定位

f.png

g.png

 /*右半邊嘴巴*/
    .zuiba > div:nth-child(2) { width: 50px;height: 40px;border-bottom: 4px solid #2e2e2e; border-left: 4px solid #2e2e2e;
        border-radius:40% 0% 20% 50%;  margin-left: 13px;margin-top: -26px; position:absolute; transition:  border-radius  1s;}
    /*左半邊嘴巴*/
    .zuiba > div:nth-child(3) {width: 50px; height: 40px;border-bottom: 4px solid #2e2e2e; border-right: 4px solid #2e2e2e;border-radius:0% 40% 50% 20%;
        margin-left: -38px;margin-top: -26px; position:absolute;transition:  border-radius  1s;}
.mao:hover .zuiba > div:nth-child(2) {border-radius: 50% 50% 50% 50%;width: 40px; /*transition:  border-radius  1s ;*/}
.mao:hover .zuiba > div:nth-child(3) {width: 40px; margin-left: -30px;border-radius: 50% 50% 50% 50%; /*transition:  border-radius  1s;*/}
.ceshi {width: 26px;height: 26px;-webkit-border-radius: 50% 50% 50% 0;-moz-border-radius: 50% 50% 50% 0;-o-border-radius: 50% 50% 50% 0;
    border-radius: 50% 50% 50% 0;-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);transform: rotate(-45deg);margin: 1px 4px 7px;    border: 2px solid;}