纯CSS3画出小黄人并实现动画效果

原文出处： 郭锦荣   前言前两天我刚发布了一篇CSS3实现小黄人动画的博客，但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片，并自己用PS抠出需要实现动画的部分，最后才完成的动画效果。但是，其实我的初衷是想体验一下用图片做动画的赶脚，但是找不到素材，才无奈用了最笨的方法来满足自己的需求，本想勉强能看就行了。可是呢，还是抵不住自己内心的完美，于是乎，用了一个晚上用CSS3画出了小黄人再实现类似的动画效果。正题OK，大家看一下下面两张图有什么不同：  当然，很多人会说，明显大小不同，嘴巴，头发也是不一样的。但是其实最大的不同是，用一个形象一点的例子就是：这是两个孩子，第一个是从超市货架上拿的，另外一个是我自己生的。怎么生呢？——用CSS3！那么生下来得会动啊，不然就夭折了，所以，我就多拍了几个，就变成这样子了： 怎么样？虽然手脚动画还是不怎么神似，但人类聪明地大脑还是能看得出啥意思的吧！今天就让我们一起学习如何生出一个小黄人来。首先，还是直接把HTML结构放出来给大家打量打量：XHTML 12345678910111213141516171819202122232425262728293031323334353637383940414243444546    <div class="wrapper"><!-- 容器 -->        <div class="littleH"><!-- 小黄人 -->            <div class="bodyH"><!-- 身体 -->                <div class="trousers"><!-- 裤子 -->                    <div class="condoleBelt"><!-- 吊带 -->                        <div class="left"></div>                        <div class="right"></div>                    </div>                    <div class="trousers_top"></div><!-- 裤子突出的矩形部分 -->                    <div class="pocket"></div><!-- 裤袋 -->                    <!-- 三条线 -->                    <span class="line_left"></span>                    <span class="line_right"></span>                    <span class="line_bottom"></span>                </div>            </div>            <div class="hair"><!-- 头发 -->                <span class="left_hair_one"></span>                <span class="left_hair_two"></span>            </div>            <div class="eyes"><!-- 眼睛 -->                <div class="leftEye"><!-- 左眼 -->                    <div class="left_blackEye">                        <div class="left_white"></div>                    </div>                </div>                <div class="rightEye"><!-- 右眼 -->                    <div class="right_blackEye">                        <div class="right_white"></div>                    </div>                </div>            </div>            <div class="mouse"><!-- 嘴巴 -->                <div class="mouse_shape"></div>            </div>            <div class="hands"><!-- 双手 -->                <div class="leftHand"></div>                <div class="rightHand"></div>            </div>            <div class="feet"><!-- 双脚 -->                <div class="left_foot"></div>                <div class="right_foot"></div>            </div>            <div class="groundShadow"></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