咱们每次画一个图片，肯定先要确定一个容器，几确定一下图形的位置和大小。
按照绘画习惯，我们肯定是先画最大的头部，头部确定了，耳朵嘴巴的位置才能确定。
猫咪头部.png
画猫咪的耳朵部分
猫咪的耳朵分布在头部的左右两边，所以肯定是由两个div画成，为了不显得那么僵硬，我们可以把两边的耳朵稍微画的不一样大。
大家肯定会想：耳朵的形状这么奇怪，到时是怎么画的呢？其实很简单，就是通过矩形然后设置各个角度的border-radius就会形成一种尖角的效果，再旋转相应的角度跟头部贴合就可以了。
最后将耳朵隐藏在脸部的后面，露出一点点耳尖就可以了。
耳朵.jpg
画猫咪的眼睛部分
眼睛部分有点复杂哟，不经过仔细的一番研究和强大的想象力是很难画出来的：解剖一下就是上下两个椭圆重叠而成，多余的部分隐藏，中间的褐色眼珠是在上面圆形中的一个黑色矩形。
猫咪眼睛.jpg
画猫咪的脸部花纹
喵咪的胡须可是很重要的哟，如果不小心把它剪了可是很严重的，猫咪就再也无法测量自己可以钻进多大的洞里了，哈哈。
仔细观察花纹其实就是由左右各5条线条组成，画出线条再做相应的变换就可以了。
猫咪脸部花纹.jpg
画猫咪的鼻子
感觉这是整个猫咪最好画的地方了，简单的一个半圆就可以解决问题啦~啦啦啦啦~
猫咪的鼻子.png
画猫咪的嘴巴
咦？是不是感觉画着画着就到了最后一部分了，哈哈哈哈哈，好开心啊~又吃成长快乐了~
嘴巴就像两撇小胡子，用两个矩形边框就可以实现了。
猫咪嘴巴.jpg
各个部位拼接成一个完整的小猫
拼图咯--哈哈.jpg
制作鼠标移动上去的动态效果
我们家毛球可是个动如脱兔的家伙哦，所以我们来给猫咪加点特效吧~(^__^)
鼠标移动上去之后两耳耳朵左右摆动
眼睛眯眯呈现笑脸的形状
PS：眼睛眯起来之后下面出现了一部分红晕，就是两个背景颜色半透明的小椭圆组成的，只要在鼠标移动上去只会把椭圆显示出来就可以了。
眼睛下面的红晕.png
嘴角上扬
/*鼠标浮动耳朵样式*/.mao:hover.erduo>div:first-child{left:-10px;transform:rotate(0deg);-ms-transform:rotate(0deg);-moz-transform:rotate(0deg);-webkit-transform:rotate(0deg);-o-transform:rotate(0deg);border-radius:4%80%0%60%;
学习过程中遇到什么问题或者想获取学习资源的话，欢迎加入学习交流群
343599877，我们一起学前端！
投稿人：魏一依
2023-09-19
上一篇
下一篇
购买咨询，新片场场课小助手，请备注：“课程”方便了解您的需求。