Rumah > Artikel > hujung hadapan web > html实现的动图之小猫笑脸
html实现的动图之小猫笑脸
- 零下一度asal
- 2017-06-24 13:09:054477semak imbas
猫咪容器
-
咱们每次画一个图片，肯定先要确定一个容器，几确定一下图形的位置和大小。
<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: 20; left: 50%; margin-left: -150px; overflow: hidden; }/*左眼*/.yanquan { height: 100px; /*设置左眼的高度和宽度，多余的部分隐藏*/ width: 100px; border: 2px solid #2e2e2e; border-radius: 50% 50% 50% 50%; overflow: hidden; position: absolute; }/*黑色眼珠子 左*/ .yanquan > div { height: 100px; width: 30px; background-color: #2e2e2e; margin-left: 35px; /*将黑色眼珠子定义在眼睛的中间*/ 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; /*为后面的hover动态做准备*/ }/*右边眼睛的整体定义，其它都跟左眼一样，就是位置不一样*/.yan_right { left: 196px; top: 0px; position: absolute; }
猫咪眼睛.jpg
画猫咪的脸部花纹
喵咪的胡须可是很重要的哟，如果不小心把它剪了可是很严重的，猫咪就再也无法测量自己可以钻进多大的洞里了，哈哈。
-
仔细观察花纹其实就是由左右各5条线条组成，画出线条再做相应的变换就可以了。
<div class="face_huawen"> <!-- 存放花纹的div --> <div class="face_huawen_huawen huawen_left"> <!-- 存放每一个线条的div --> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div class="face_huawen_huawen huawen_right"> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div style="clear:both"></div> </div>/*脸部花纹*//*左边花纹*/.face_huawen { height: 80px; /*设置花纹整体的高度和宽度*/ width: 380px; position: absolute; /*设置花纹在脸部的位置*/ top: 190px; z-index: 20; left: 50%; margin-left: -190px; }.face_huawen_huawen > div:first-child { /*设置第一条花纹的宽高和变化情况（圆角大小和旋转角度）*/ width: 30px; height: 10px; border-top: 6px #E53941 solid; border-radius: 30% 80% 20% 50%; transform: rotate(25deg); -ms-transform: rotate(25deg); -moz-transform: rotate(25deg); -webkit-transform: rotate(25deg); -o-transform: rotate(25deg); margin-left: 20px; }.face_huawen_huawen > div:nth-child(2) { /*设置第二条花纹*/ width: 20px; height: 6px; background-color: #E53941; border-radius: 50% 50% 50% 50%; transform: rotate(25deg); -ms-transform: rotate(25deg); -moz-transform: rotate(25deg); -webkit-transform: rotate(25deg); -o-transform: rotate(25deg); margin-left: 20px; }.face_huawen_huawen > div:nth-child(3) {/*设置第三条花纹*/ /*margin-top:10px;*/ width: 32px; height: 10px; border-bottom: 4px #E53941 solid; border-radius: 30% 0% 90% 30%; transform: rotate(25deg); -ms-transform: rotate(25deg); -moz-transform: rotate(25deg); -webkit-transform: rotate(25deg); -o-transform: rotate(25deg); margin-left: 8px; }.face_huawen_huawen > div:nth-child(4) {/*设置第四条花纹*/ margin-top: 20px; width: 26px; height: 20px; border-bottom: 4px #E53941 solid; border-radius: 30% 0% 90% 30%; transform: rotate(30deg); -ms-transform: rotate(30deg); -moz-transform: rotate(30deg); -webkit-transform: rotate(30deg); -o-transform: rotate(30deg); margin-left: 28px; }.face_huawen_huawen > div:last-child {/*设置第二五条花纹*/ width: 22px; height: 10px; border-bottom: 3px #E53941 solid; border-radius: 0% 0% 50% 50%; transform: rotate(-15deg); -ms-transform: rotate(-15deg); -moz-transform: rotate(-15deg); -webkit-transform: rotate(-15deg); -o-transform: rotate(-15deg); margin-left: 40px; margin-top: -8px; }/*右边花纹，右边花纹的位置和旋转角度跟左边花纹不一样，其它变换都一样*/.huawen_right { float: right; transform: rotateY(180deg); -webkit-transform: rotateY(180deg); /* Safari 和 Chrome */ -moz-transform: rotateY(180deg); /* Firefox */ margin-top: -85px; }
猫咪脸部花纹.jpg
画猫咪的鼻子
-
感觉这是整个猫咪最好画的地方了，简单的一个半圆就可以解决问题啦~啦啦啦啦~
<div class="bizi"> <div></div> </div>/*鼻子，不多做解释了，方法都差不多：确定位置和形状即可*/.bizi { width: 30px; height: 36px; position: absolute; left: 50%; margin-left: -15px; top: 260px; z-index: 30; } .bizi > div { width: 30px; height: 10px; border-bottom: 8px solid #2e2e2e; border-radius: 0% 0% 50% 50%; margin-top: -10px; }
猫咪的鼻子.png
画猫咪的嘴巴
咦？是不是感觉画着画着就到了最后一部分了，哈哈哈哈哈，好开心啊~又吃成长快乐了~
-
嘴巴就像两撇小胡子，用两个矩形边框就可以实现了。
<div class="zuiba_box"> <div class="zuiba"> <div></div> <div></div> </div> </div>.zuiba { /*设置嘴巴的位置*/ margin-left: 85px; margin-top: 6px; } /*右半边嘴巴*/ .zuiba > div:first-child { 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(2) { 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; }
猫咪嘴巴.jpg
各个部位拼接成一个完整的小猫
-
各个部位都画好之后，又到了像大白一样的拼图时间了，哈哈~大家一起拼出一个萌萌哒小猫吧~(主要是对transition属性的运用，设置:hover之后的属性，然后用transition设置属性完成变化的过渡时间)
拼图咯--哈哈.jpg
制作鼠标移动上去的动态效果
我们家毛球可是个动如脱兔的家伙哦，所以我们来给猫咪加点特效吧~(^__^)
鼠标移动上去之后两耳耳朵左右摆动
眼睛眯眯呈现笑脸的形状
-
嘴角上扬
/*鼠标浮动耳朵样式*/.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：眼睛眯起来之后下面出现了一部分红晕，就是两个背景颜色半透明的小椭圆组成的，只要在鼠标移动上去只会把椭圆显示出来就可以了。
眼睛下面的红晕.png
学习过程中遇到什么问题或者想获取学习资源的话，欢迎加入学习交流群
Atas ialah kandungan terperinci html实现的动图之小猫笑脸. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：html基础之from表单的实例教程Artikel seterusnya：div+css模拟select下拉框实例代码