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

TOP

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

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

wen_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：眼睛眯起来之后下面出现了一部分红晕，就

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

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