你的位置:首页 > 网页设计

[网页设计]纯CSS3画出小黄人并实现动画效果


原文出处: 郭锦荣  前言前两天我刚发布了一篇CSS3实现小黄人动画的博客,但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片,并自己用PS抠出需要实现动画的部分,最后才完成的动画效果。但是,其实我的初衷是想体验一下用图片做动画的赶脚,但是找不到素材,才无奈用了最笨的方法来满足自己的需求,本想勉强能看就行了。可是呢,还是抵不住自己内心的完美,于是乎,用了一个晚上用CSS3画出了小黄人再实现类似的动画效果。正题OK,大家看一下下面两张图有什么不同: 当然,很多人会说,明显大小不同,嘴巴,头发也是不一样的。但是其实最大的不同是,用一个形象一点的例子就是:这是两个孩子,第一个是从超市货架上拿的,另外一个是我自己生的。怎么生呢?——用CSS3!那么生下来得会动啊,不然就夭折了,所以,我就多拍了几个,就变成这样子了: 怎么样?虽然手脚动画还是不怎么神似,但人类聪明地大脑还是能看得出啥意思的吧!今天就让我们一起学习如何生出一个小黄人来。首先,还是直接把HTML结构放出来给大家打量打量:XHTML 12345678910111213141516171819202122232425262728293031323334353637383940414243444546  <div ><!-- 容器 -->    <div ><!-- 小黄人 -->      <div ><!-- 身体 -->        <div ><!-- 裤子 -->          <div ><!-- 吊带 -->            <div ></div>            <div ></div>          </div>          <div ></div><!-- 裤子突出的矩形部分 -->          <div ></div><!-- 裤袋 -->          <!-- 三条线 -->          <span ></span>          <span ></span>          <span ></span>        </div>      </div>      <div ><!-- 头发 -->        <span ></span>        <span ></span>      </div>      <div ><!-- 眼睛 -->        <div ><!-- 左眼 -->          <div >            <div ></div>          </div>        </div>        <div ><!-- 右眼 -->          <div >            <div ></div>          </div>        </div>      </div>      <div ><!-- 嘴巴 -->        <div ></div>      </div>      <div ><!-- 双手 -->        <div ></div>        <div ></div>      </div>      <div ><!-- 双脚 -->        <div ></div>        <div ></div>      </div>      <div ></div><!-- 脚底阴影 -->    </div>  </div>好的,每一处我都标明了它的用途,大家可以稍微理解一下,在头脑里有一个大概的模型或者层次结构。接下来就是猛料了。。。我将分步讲解,一步一步实现:首先对容器和整体做一些简单的样式设置:CSS 123456789101112131415161718192021  body{  margin: 0;  padding:0;}.wrapper{  width: 300px;  margin:100px auto;}.litteH{  position: relative;}.bodyH{  position: absolute;  width: 240px;  height: 400px;  border:5px solid #000;  border-radius: 115px;  background: rgb(249,217,70);  overflow: hidden;  z-index: 2;}其中.bodyH主要就是绘制小黄人的身体,身体的比例很重要,现在运行看一下效果: OK,身体已经有了,现在赶紧给它穿个裤子吧!CSS 12345678910111213141516171819202122  .bodyH .condoleBelt{  position: absolute;}.bodyH .trousers{  position: absolute;  bottom: 0;  width: 100%;  height: 100px;  border-top: 6px solid #000;  background: rgb(32,116,160);}.trousers_top{  width: 160px;  height: 60px;  border:6px solid #000;  border-bottom: none;  border-radius: 0 0 5px 5px;  background: rgb(32,116,160);  position: absolute;  bottom: 100px;  left:34px;}其中.trousers_top就是矩形部分,那么穿完裤子是什么样子的呢? 现在怎么看都像一颗胶囊,不行,赶紧修饰修饰,给它一个吊带,不然裤子会掉呢:CSS 1234567891011121314151617181920212223242526272829303132  .bodyH .condoleBelt .left,.bodyH .condoleBelt .right{  width: 100px;  height: 16px;  border:5px solid #000;  background: rgb(32,116,160);  position: absolute;  top:-90px;  left:-35px;  z-index: 2;  -webkit-transform:rotate(45deg);}.bodyH .condoleBelt .left{  top:-88px;  left:165px;  -webkit-transform:rotate(-45deg);}.bodyH .condoleBelt .left:after,.bodyH .condoleBelt .right:after{  content: '';  width: 8px;  height: 8px;  border-radius: 50%;  background: #000;  position: absolute;  top:4px;  left:88px;} .bodyH .condoleBelt .left:after{  left:5px;}这一块主要就是实现两个吊带,左右各一条,然后我使用:after伪元素来实现吊带上的小黑点: 咦,开始有模有样了,接下来我们一鼓作气把裤袋和一下修饰的边边给实现了:CSS 123456789101112131415161718192021222324252627282930313233343536373839  .pocket{  width: 60px;  height: 45px;  border:6px solid #000;  border-radius: 0px 0px 25px 25px;  position: absolute;  bottom:65px;  left:84px;}.line_right{  width: 30px;  height: 30px;  border-bottom-left-radius: 100px;  border-bottom:6px solid #000;  border-left:6px solid #000;  position: absolute;  left: 0;  bottom:60px;  -webkit-transform:rotate(-75deg);}.line_left{  width: 30px;  height: 30px;  border-bottom-right-radius: 100px;  border-bottom:6px solid #000;  border-right:6px solid #000;  position: absolute;  right: 0;  bottom:63px;  -webkit-transform:rotate(75deg);}.line_bottom{  height: 40px;  border:3px solid #000;  border-radius: 3px;  position: absolute;  left:118px;  bottom: 0px;}先看效果图: OK,两个注意点说一下:1.我把裤子放在身体里面,然后给.bodyH添加overflow:hidden,这样我们就不用去多虑溢出怎么办,而且很轻松就能实现裤子的效果;2.可以看到裤子两边有两条有弧度的曲线段,我是通过给矩形某一个角实现圆角效果,然后只设置与这个角相邻的两条边的边框样式,然后旋转一下角度就实现这个效果了,当然只能实现简单一点的效果。好的,我们继续,接下来先实现以下眼睛部分吧:CSS 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657  .eyes{  position: relative;  z-index: 3;}.eyes .leftEye,.eyes .rightEye{  width: 85px;  height: 85px;  border-radius: 50%;  border:6px solid #000;  background: #fff;  position: absolute;  top:60px;  left: 27px;}.eyes .leftEye{  left: 124px;}.eyes .leftEye .left_blackEye,.eyes .rightEye .right_blackEye{  width: 40px;  height: 40px;  border-radius: 50%;  background: #000;  position: absolute;  top:24px;  left:22px;}.eyes .leftEye .left_blackEye .left_white,.eyes .rightEye .right_blackEye .right_white{  width: 20px;  height: 20px;  border-radius: 50%;  background: #fff;  position: absolute;  top:7px;  left:17px;}.eyes .leftEye .left_blackEye .left_white{  top:4px;  left:17px;}.eyes .leftEye:after,.eyes .rightEye:after{  content: '';  width: 28px;  height: 18px;  background: #000;  position: absolute;  left:-30px;  top:37px;  -webkit-transform:skewX(20deg) rotate(7deg);}.eyes .leftEye:after{  left:89px;  top:37px;  -webkit-transform:skewX(-20deg) rotate(-7deg);}眼睛部分还是挺好实现的,先画眼镜,然后黑眼珠,再画白点,最后我才画的眼镜框,眼睛框我是用:after伪元素实现的。效果图如下: 嘴巴是最困惑我的,但还是最后还是能实现:CSS 123456789101112131415  .mouse{  position: relative;}.mouse .mouse_shape{  width: 55px;  height: 35px;  border:5px solid #000;  border-bottom-left-radius: 30px;  background: #fff;  position: absolute;  top:175px;  left:98px;  z-index: 3;  -webkit-transform:rotate(-35deg);}首先也是通过矩形其中一个角实现圆角来模拟嘴巴形状,再加以旋转: 结果是这样的,那么想要达到我们预期的效果,就需要把上半部分给遮掉,所以我用:after伪元素来实现遮罩效果:CSS 1234567891011  .mouse .mouse_shape:after{  content: '';  width: 70px;  height: 32px;  border-bottom:5px solid #000;  border-radius:35px 26px 5px 5px;  background: red;  position: absolute;  top:-16px;  left:3px;  -webkit-transform:rotate(34deg);}这个地方就需要慢慢调到合适的位置,模拟图如下: 红色部分就是遮罩了,也是一个矩形,设置了底边框,实现和嘴巴下半部分形成闭合效果,现在我们就可以把颜色改成肤色就行了:CSS 12345678910111213  .mouse .mouse_shape:after{  content: '';  width: 70px;  height: 32px;  border-bottom:5px solid #000;  border-radius:35px 26px 5px 5px;  background: rgb(249,217,70);  position: absolute;  top:-16px;  left:3px;  -webkit-transform:rotate(34deg);  -webkit-animation: mouse_mask 5s ease-in-out infinite;}效果图如下: 接下来实现双手部分,这一部分不难,就是两个圆角矩形,旋转了角度,然后层级低于身体的层级就行,然后再通过:after伪元素实现胳膊关节处就搞定了。CSS 12345678910111213141516171819202122232425262728293031323334353637  .hands{  position: relative;}.hands .leftHand,.hands .rightHand{  width: 80px;  height: 80px;  border:6px solid #000;  border-radius: 25px;  background: rgb(249,217,70);  position: absolute;  top:220px;  left:-23px;  -webkit-transform:rotate(40deg);}.hands .leftHand{  left:182px;  top:220px;  -webkit-transform:rotate(-40deg);}.hands .leftHand:after,.hands .rightHand:after{  content: '';  width: 6px;  border:3px solid #000;  border-radius: 3px;  position: absolute;  left:13px;  top:50px;  -webkit-transform:rotate(90deg);} .hands .leftHand:after{  left:53px;  top:50px;  -webkit-transform:rotate(-90deg);}效果图如下: 再接下来就是双脚的部分了,主要就是鞋面的设计,我是通过一个矩形,然后设置不同的圆角值,加上一点点的旋转来模拟的,这一块的话,怎么做我都觉得不是很像,所以最后差不多我就妥协了。CSS 1234567891011121314151617181920212223242526272829303132333435363738  .feet{  position: relative;}.feet .left_foot,.feet .right_foot{  width: 36px;  height: 50px;  border-bottom-right-radius: 6px;  border-bottom-left-radius: 9px;  background: #000;  position: absolute;  top: 406px;  left:88px;  -webkit-transform-origin: right top;}.feet .left_foot{  border-bottom-right-radius: 9px;  border-bottom-left-radius: 6px;  left:130px;  -webkit-transform-origin: left top;}.feet .left_foot:after,.feet .right_foot:after{  content: '';  width: 60px;  height: 35px;  border-radius: 20px 10px 21px 15px;  background: #000;  position: absolute;  left:-36px;  top:14.4px;  -webkit-transform:rotate(5deg);}.feet .left_foot:after{  border-radius: 10px 20px 15px 21px;  left:13px;  -webkit-transform:rotate(-5deg);}效果图如下: 本来是不想画头发的,感觉怪难的,最后尝试了一下,还是能出个样子,那就添加上去吧。原理跟裤子左右两边的实现原理是一样的,只是参数值不一样罢了,大家参考代码琢磨一下:CSS 1234567891011121314151617181920212223  .hair{  position: relative;}.left_hair_one{  width: 130px;  height: 100px;  border-radius: 50%;  border-top:8px solid #000;  position: absolute;  left:17px;  top:-17px;  -webkit-transform:rotate(27deg);}.left_hair_two{  width: 80px;  height: 80px;  border-radius: 50%;  border-top:6px solid #000;  position: absolute;  left:45px;  top:-10px;  -webkit-transform:rotate(15deg);}补充脚底阴影部分:CSS 12345678910  .groundShadow{  width: 200px;  height: 2px;  border-radius: 50%;  background: rgba(0,0,0,0.3);  box-shadow: 0 0 2px 4px rgba(0,0,0,0.3);  position: relative;  top: 455px;  left:25px;}最后就是最初的效果了: 这时大家可能会问:然后呢?不是还会动的吗?是的,这里我就大概讲一下实现的思路吧:1.头发:头发我想实现的是被小风轻轻地吹起来,然后很快就塌下去,所以吹起和下塌分配的时间很关键;2.眼睛:眼睛我设想的场景是小黄人在悠闲地走路,然后不时左右看一下两边的风景,所以眼睛转动很悠哉,所以分配的时间可以稍微长一点点;3.嘴巴:让嘴巴动起来确实比较难,因为要动的话,遮罩也得实时跟着改变,而且不能露馅,所以最后实现的是当它往左边看了一下之后卖了一下萌;4.双手和双脚:这部分确实很难逼真,本来脚就不是正常的走路状态,所以只能按卓别林老爷爷的走路方式模拟一下,而且左右脚动作是紧接实现而不是同步实现。双手的话,我是简单模拟人在走路时有摆手的自然惯性,而且是左脚配右手,右脚配左手。考虑到它的双手是放在背后的,所以我的摆动幅度设置为非常小,有效果但不明显。OK,我就直接把动画代码放上来吧:CSS 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117  .left_hair_one{  -webkit-animation: lefthair 2s ease-in-out infinite;}@-webkit-keyframes lefthair{  0%,25%,31%,100%{  }  30%{    -webkit-transform: rotate(31deg) translate3d(-3px,-1px,0);  }}.eyes .leftEye .left_blackEye,.eyes .rightEye .right_blackEye{  -webkit-animation: blackeye 5s ease-in infinite;}@-webkit-keyframes blackeye{  0%,20%,50%,70%,100%{    -webkit-transform: translateX(0px);  }  30%,40%{    -webkit-transform: translateX(15px);  }  80%,90%{    -webkit-transform: translateX(-15px);  }}.eyes .leftEye .left_blackEye .left_white,.eyes .rightEye .right_blackEye .right_white{  -webkit-animation: whiteeye 5s ease-in-out infinite;}@-webkit-keyframes whiteeye{  0%,20%,50%,70%,100%{    -webkit-transform: translateX(0px);  }  30%,40%{    -webkit-transform: translate3d(3px,4px,0);  }  80%,90%{    -webkit-transform: translate3d(-15px,4px,0);  }}.mouse .mouse_shape{  -webkit-animation: mouse 5s ease-in-out infinite;}@-webkit-keyframes mouse{  40%,43%{    width: 45px;    height: 25px;    top:180px;  }  0%,35%,48%,100%{    width: 55px;    height: 35px;    top:175px;    -webkit-transform:rotate(-35deg);  }}.mouse .mouse_shape:after{  -webkit-animation: mouse_mask 5s ease-in-out infinite;}@-webkit-keyframes mouse_mask{  40%,43%{    width: 60.5px;    top:-19.3px;    left:1.5px;  }  0%,35%,48%,100%{    width: 70px;    top:-16px;    left:3px;    -webkit-transform:rotate(33deg);  }}.hands .rightHand{  -webkit-animation:rightHand .8s ease-in-out infinite;}@-webkit-keyframes rightHand{  0%,50%,100%{    -webkit-transform: rotate(40deg);  }  30%{    -webkit-transform: rotate(37deg) translateX(1px);  }}.hands .leftHand{  -webkit-animation:leftHand .8s ease-in-out infinite;}@-webkit-keyframes leftHand{  0%,50%,100%{    -webkit-transform: rotate(-40deg);  }  80%{    -webkit-transform: rotate(-37deg) translateX(-1px);  }}.feet .right_foot{  -webkit-animation: rightfoot .8s ease-in-out infinite;}@-webkit-keyframes rightfoot{  0%,50%,100%{    -webkit-transform: rotate(0deg);  }  80%{    -webkit-transform: rotate(10deg);  }}.feet .left_foot{  -webkit-animation: leftfoot .8s ease-in-out infinite;}@-webkit-keyframes leftfoot{  0%,50%,100%{    -webkit-transform: rotate(0deg);  }   30%{    -webkit-transform: rotate(-10deg);  }}    针对程序员的原生APP,以共享知识技能为目的,以悬赏方式的在线互动交互平台 。  我们拥有高达近20人顶尖的技术团队,以及优秀的产品及运营团队。团队领军人 物均在行业内有10年以上的丰富经验。  现在我们正在招募原始的参与英雄,您将同我们一起改变程序员的工作方式,改 变程序员的世界!同时也会有丰厚的报酬。作为我们的原始的参与者,您将同我们一 起体验这款程序员神器,您可以提出专业的建议,我们会虚心采纳。每一个人都会是 英雄,而您就会是我们需要的英雄!同时您也可以邀请您的朋友一起参与这场英雄的 招募互动。  广招原始参与英雄,共行颠覆程序员工作方式之盛事,特此悬赏,报酬丰厚,望 共赴盛举。  来?还是不来?  接头人暗号:1955246408 (QQ)