猫咪容器

• 咱们每次画一个图片，肯定先要确定一个容器，几确定一下图形的位置和大小。

  <div class="mao_box"> <div class="mao"></div> </div> body {margin: 0px;background: #F6F7A7;} .mao_box {position: relative;top: 50px ;} /*设置宽度并且居中显示*/ .mao {margin: 0 auto;width: 400px;}

画喵咪的头部和头部的花纹

• 按照绘画习惯，我们肯定是先画最大的头部，头部确定了，耳朵嘴巴的位置才能确定。

  <!-- 猫咪的头部框架 -->
        <div class="mao_head"> <div class="huawen"> <div><!--头部花纹——左边橙色--></div> </div> </div> .mao_head { width: 400px; /*设置高度和宽度*/ height: 340px; background: #F6F7F2; position: relative; border-radius: 50% 50% 35% 35%; /*画出猫脸的形状*/ border: solid 2px #2e2e2e; /*给猫咪画一个偏黑色的边框*/ overflow: hidden; z-index: 10; } .huawen { position: absolute; height: 160px; /*设置宽度和高度*/ width: 180px; background: #8D8D8D; left: 110px; /*距离猫脸左面110px的位置，正好在中间位置 (400-180)/2*/ border-radius: 0% 0% 50% 50%; /*画出花纹的形状，下面为圆角边框*/ overflow: hidden; /*花纹超出头部的部分隐藏*/ } .huawen > div:first-child { /*花纹的左右两边颜色不一样，所以改变左边半边的颜色为橙色*/ height: 160px; width: 90px; /*宽度和花纹总宽度的一半*/ background: #F0AC6B; }

  
  

  猫咪头部.png

画猫咪的耳朵部分

• 猫咪的耳朵分布在头部的左右两边，所以肯定是由两个div画成，为了不显得那么僵硬，我们可以把两边的耳朵稍微画的不一样大。
• 大家肯定会想：耳朵的形状这么奇怪，到时是怎么画的呢？其实很简单，就是通过矩形然后设置各个角度的border-radius就会形成一种尖角的效果，再旋转相应的角度跟头部贴合就可以了。
• 最后将耳朵隐藏在脸部的后面，露出一点点耳尖就可以了。

  <!--绘制耳朵的容器-->
  <div class="erduo"> <div></div><!--绘制左耳--> <div></div><!--绘制右耳--> </div> /*耳朵*/ .erduo { width: 374px; /*设置耳朵容器的高度和宽度*/ height: 120px; position: absolute; top: -6px; /*将耳朵的位置放到对应的地方*/ left: 50%; margin-left: -187px; } /*左耳*/ .erduo > div:first-child { height: 200px; /*设置左耳的高度和宽度*/ width: 160px; border: 2px solid #2e2e2e; /*给左耳设置一个边框*/ background: #f3f3f3; border-radius: 4% 80% 0% 50%; /*设置左耳各个角度的圆角程度*/ transform: rotate(-15deg); /*设置左耳的旋转角度*/ -ms-transform: rotate(-15deg); -moz-transform: rotate(-15deg); -webkit-transform: rotate(-15deg); -o-transform: rotate(-15deg); position: absolute; left: -20px; top: 0px; transition: transform 1s,left 1s; /*设置左耳的hover动效*/ } /*右耳跟左耳的画法同理*/ .erduo > div:last-child { height: 180px; width: 160px; border: 2px solid #2e2e2e; background: #f3f3f3; transform: rotate(15deg); -ms-transform: rotate(15deg); -moz-transform: rotate(15deg); -webkit-transform: rotate(15deg); -o-transform: rotate(15deg); border-radius: 80% 4% 50% 0%; position: absolute; right: -20px; top: 0px; transition: transform 1s,right 1s; }

  
  

  耳朵.jpg

画猫咪的眼睛部分

• 眼睛部分有点复杂哟，不经过仔细的一番研究和强大的想象力是很难画出来的：解剖一下就是上下两个椭圆重叠而成，多余的部分隐藏，中间的褐色眼珠是在上面圆形中的一个黑色矩形。

  <div class="yanjing"> <div> <div class="yanquan"> <div></div> <!--存放竖着的眼球的div--> </div> <div class="yanquan_hedding"> <!--存放眼睛下睫毛的div--> </div> <div class="hong"></div> </div> <div class="yan_right"> <div class="yanquan"> <div></div> </div> <div class="yanquan_hedding"> </div> <div class="hong"></div> </div> <div style="clear:both"></div> </div> /*眼睛*/ .yanjing { height: 60px; /*设置眼睛整体的高度和宽度，多余的部分隐藏*/ width: 300px; position: absolute; /*设置眼睛的位置，使它定位在脸部中间*/ top: 200px; z-index: