分享html打造动画哆啦A梦的示例代码

定义哆啦a梦的容器

千篇一律先定义一个画哆啦a梦的大容器，确定它的大小和位置。

 !-- 哆啦A梦大容器 --  p >
画哆啦a梦的头部（包括脸，脸部包括眼睛和鼻子）
头部包含好几块部分：哆啦a梦的脸部和鼻子，脸部又包括两只眼睛，两只眼睛里面还有眼珠和眼白部分，所以会有好几层的dom嵌套，当然基本图形都是由p+border-radius拼凑而成。
将画好的各个部位品拼凑到相应的位置上即可。
看我前面画的几个图画就知道border-radius是一个非常常用的属性，几乎p的每一次变形都离不开它，其实border-radius的真面目应该是border-radius: 300px 300px 300px 300px/300px 300px 300px 300px;酱紫的，我们一般不写斜杠后面的内容，斜杠切面是水平长度，斜杠后面是垂直高度，前杠后面默认不写就是水平和垂直大小是一样的。我知道我这样说不够详细，可以参考我鑫神的博客秋月何时了，CSS3 border-radius知多少？，保证你分分钟在老司机的带领下彻底弄懂border-radius，还不快上车？
 !-- 头 --  p >

哆啦a梦的头部.png
画哆啦a梦的嘴巴部分
嘴巴应该是很简单的了吧，看一眼就知道是是用边框+border-radius实现的。
 p >
 

哆啦a梦的嘴巴.png
画哆啦a梦的胡须部分
胡须部分其实在上一篇文章画html打造动画【连载3】- 小猫笑脸动画里面画胡须的时候就已经介绍了画胡须的方法，在这里就不赘述了，基本思路都是一样的。
 !-- 胡须 --  p >
 

哆啦a梦的胡须.png
画哆啦a梦的脖子部分(脖子部分包括铃铛)
脖子就是基本p变形之后的图形，多余的部分隐藏到头部下面就可以了。
铃铛部分是各个很简单的基本图形组成。
 !-- 脖 --  p >
 

哆啦a梦的脖子.png
完成哆啦a梦的动态效果
动起来的哆啦a梦才比较萌对吧，那我们就让它动起来吧（transition属性）。
鼠标移动到眼睛部位左眼珠移动到左边。
鼠标移动到嘴巴部位，脸部表情变化。
鼠标移动到铃铛部分，铃铛变大。
/*眼睛动效*/.head:hover .face p:first-child p{ left: 0px; transition: all 1s; .head:hover .face p:first-child p p{ left: 0px; transition: all 1s;/*嘴巴动效，嘴巴的dom容器下面要加了个空的p容器*/.mouth p:first-child{ width: 82px; height: 2px; background: #000; position: absolute; z-index: 1000; top: -25px; left: 6px; display: none; .mouth p:nth-child(2){ width: 82px; height: 2px; background: #000; position: absolute; z-index: 1000; top: -25px; left: 90px; display: none; .mouth:hover{ border-radius: 0; width: 180px; height: 200px; .mouth:hover p:first-child,.mouth:hover p:nth-child(2){ display: block;/*铃铛动效*/.neck:hover p:first-child{ width: 60px; height: 60px; left: 50%; margin-left: -30px; .neck:hover p:nth-child(2){ width: 66px; height: 7.5px; left: 50%; margin-left: -33px; .neck:hover p:nth-child(3){ width: 12px; height: 12px; left: 50%; margin-left: -6px; top: 385px; .neck:hover p:nth-child(4){ width: 2px; height: 12px; left: 50%; margin-left: 1px; top: 400px; }
 

以上就是分享html打造动画哆啦A梦的示例代码的详细内容，html教程        
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。