纯css实现微笑的小猫

![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;}

纯css实现微笑的小猫

推荐阅读更多精彩内容