![Uploading g_733644.png . . .]
](http://upload-images.jianshu.io/upload_images/4115081-2a9fc7bd7a523f33.gif?imageMogr2/auto-orient/strip)
一、耳朵通過將div四個角變成不同角度的圓角之后再使用transform:rotate進行旋轉
border-radius: 4% 80% 0% 50%;
transform: rotate(-15deg);
鼠標放上去之后使旋轉的角度更大。
.mao:hover .erduo
> div:first-child{transform: rotate(0deg);}
![Uploading b_383021.png . . .]
b.png
二、臉部花紋通過將兩個div改變圓角之后填充不同的顏色,再用定位實現
border-radius: 0% 0% 50% 50%;
background: #8D8D8D;
background: #F0AC6B;
c.png
三、眼睛通過將兩個div改變圓角之后拼接出來一個眼睛得輪廓,再在里面放一個div填充成藍色作為瞳孔,鼠標經過時改變相應的樣式實現動畫
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;}
四、腮紅是在鼠標經過時改變透明度
五、胡子先改變div圓角,然后填充背景顏色,再定位實現
e.png
六、嘴巴是將兩個div的圓角動態改變,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;}
