html实现的动图之小猫笑脸

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

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

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

 !-- 猫咪的头部框架 --  div >

猫咪的耳朵分布在头部的左右两边，所以肯定是由两个div画成，为了不显得那么僵硬，我们可以把两边的耳朵稍微画的不一样大。

大家肯定会想：耳朵的形状这么奇怪，到时是怎么画的呢？其实很简单，就是通过矩形然后设置各个角度的border-radius就会形成一种尖角的效果，再旋转相应的角度跟头部贴合就可以了。

最后将耳朵隐藏在脸部的后面，露出一点点耳尖就可以了。

 !--绘制耳朵的容器--  div >

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

 div >

喵咪的胡须可是很重要的哟，如果不小心把它剪了可是很严重的，猫咪就再也无法测量自己可以钻进多大的洞里了，哈哈。

仔细观察花纹其实就是由左右各5条线条组成，画出线条再做相应的变换就可以了。

 div >

感觉这是整个猫咪最好画的地方了，简单的一个半圆就可以解决问题啦~啦啦啦啦~

 div >

咦？是不是感觉画着画着就到了最后一部分了，哈哈哈哈哈，好开心啊~又吃成长快乐了~

嘴巴就像两撇小胡子，用两个矩形边框就可以实现了。

 div >

各个部位都画好之后，又到了像大白一样的拼图时间了，哈哈~大家一起拼出一个萌萌哒小猫吧~(主要是对transition属性的运用，设置:hover之后的属性，然后用transition设置属性完成变化的过渡时间)

我们家毛球可是个动如脱兔的家伙哦，所以我们来给猫咪加点特效吧~(^__^)

鼠标移动上去之后两耳耳朵左右摆动

眼睛眯眯呈现笑脸的形状

嘴角上扬

/*鼠标浮动耳朵样式*/.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%;}.mao:hover .erduo div:last-child { right: -10px; transform: rotate(0deg); -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); border-radius: 80% 4% 60% 0%; /*transition: transform 1s,right 1s;*/}/*眯眼并且出现红晕的动态效果，眼珠的宽度变宽*/.mao:hover .yanquan div:first-child {width:40px; margin-left: 30px;}.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; /*transition: opacity 0.5s ease-in 0.2s;*/}/*眼睛浮动属性*/.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;}/*嘴巴上扬的效果*/.mao:hover .zuiba div:first-child { border-radius: 50% 50% 50% 50%;width: 40px;}.mao:hover .zuiba div:nth-child(2) {  width: 40px;margin-left: -30px;border-radius: 50% 50% 50% 50%;}

PS：眼睛眯起来之后下面出现了一部分红晕，就是两个背景颜色半透明的小椭圆组成的，只要在鼠标移动上去只会把椭圆显示出来就可以了。

学习过程中遇到什么问题或者想获取学习资源的话，欢迎加入学习交流群

以上就是html实现的动图之小猫笑脸的详细内容，html教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。