html打造动画【系列3】- 小猫笑脸动画 - Web

TOP

html打造动画【系列3】- 小猫笑脸动画(二)

2017-10-13 10:49:57 【大中小】浏览:3400次

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; } /*右边花纹，右边花纹的位置和旋转角度跟左边花纹不一样，其它变换都一样*/ .hua

首页上一页 1 2 3 4 下一页尾页 2/4/4
【大中小】【打印】【繁体】【投稿】【收藏】【推荐】【举报】【评论】【关闭】【返回顶部】

上一篇：web开发之菜鸟的代码规范	下一篇：IE版本判断