<p>前言</p>    <p>前两天我刚发布了一篇CSS3实现小黄人动画的博客，但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片，并自己用PS抠出需要实现动画的部分，最后才完成的动画效果。但是，其实我的初衷是想体验一下用图片做动画的赶脚，但是找不到素材，才无奈用了最笨的方法来满足自己的需求，本想勉强能看就行了。可是呢，还是抵不住自己内心的完美，于是乎，用了一个晚上用CSS3画出了小黄人再实现类似的动画效果。</p>    <p>正题</p>    <p>OK，大家看一下下面两张图有什么不同：</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/3bb5238fb8a8070fe87d999e67856dd1.jpg">  </p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/fcc420e879eede798a74fa2374aec123.jpg"></p>    <p>当然，很多人会说，明显大小不同，嘴巴，头发也是不一样的。但是其实最大的不同是，用一个形象一点的例子就是：这是两个孩子，第一个是从超市货架上拿的，另外一个是我自己生的。怎么生呢?——用CSS3!</p>    <p>那么生下来得会动啊，不然就夭折了，所以，我就多拍了几个，就变成这样子了：</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/7813019b87dc8bce08e49df6a5e427bf.gif"></p>    <p>怎么样?虽然手脚动画还是不怎么神似，但人类聪明地大脑还是能看得出啥意思的吧!今天就让我们一起学习如何生出一个小黄人来。</p>    <p>首先，还是直接把HTML结构放出来给大家打量打量：</p>    <pre>  <code class="language-css"><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>    </code></pre>    <p>好的，每一处我都标明了它的用途，大家可以稍微理解一下，在头脑里有一个大概的模型或者层次结构。</p>    <p>接下来就是猛料了。。。我将分步讲解，一步一步实现：</p>    <p>首先对容器和整体做一些简单的样式设置：</p>    <pre>  <code class="language-css">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;      }    </code></pre>    <p>其中.bodyH主要就是绘制小黄人的身体，身体的比例很重要，现在运行看一下效果：</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/3507c9d1838df783257b2e7d81cf4721.jpg"></p>    <p>OK，身体已经有了，现在赶紧给它穿个裤子吧!</p>    <pre>  <code class="language-css">.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;      }    </code></pre>    <p>其中.trousers_top就是矩形部分，那么穿完裤子是什么样子的呢?</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/b475ee62d1e1982957e83ab71359a503.jpg"></p>    <p>现在怎么看都像一颗胶囊，不行，赶紧修饰修饰，给它一个吊带，不然裤子会掉呢：</p>    <pre>  <code class="language-css">.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;      }    </code></pre>    <p>这一块主要就是实现两个吊带，左右各一条，然后我使用：after伪元素来实现吊带上的小黑点：</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/d6be608d6f8a89a3f5604c50d125edcb.jpg"></p>    <p>咦，开始有模有样了，接下来我们一鼓作气把裤袋和一下修饰的边边给实现了：</p>    <pre>  <code class="language-css">.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;      }    </code></pre>    <p>先看效果图：</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/3e2963b6b946bd3df489a6b7c0b339df.jpg"></p>    <p>OK，两个注意点说一下：</p>    <p>1.我把裤子放在身体里面，然后给.bodyH添加overflow:hidden，这样我们就不用去多虑溢出怎么办，而且很轻松就能实现裤子的效果;</p>    <p>2.可以看到裤子两边有两条有弧度的曲线段，我是通过给矩形某一个角实现圆角效果，然后只设置与这个角相邻的两条边的边框样式，然后旋转一下角度就实现这个效果了，当然只能实现简单一点的效果。</p>    <p>好的，我们继续，接下来先实现以下眼睛部分吧：</p>    <pre>  <code class="language-css">.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);      }    </code></pre>    <p>眼睛部分还是挺好实现的，先画眼镜，然后黑眼珠，再画白点，最后我才画的眼镜框，眼睛框我是用：after伪元素实现的。效果图如下：</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/65fe19ad6c14d3a94abcd1e5f398c93a.jpg"></p>    <p>嘴巴是最困惑我的，但还是最后还是能实现：</p>    <pre>  <code class="language-css">.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);      }    </code></pre>    <p>首先也是通过矩形其中一个角实现圆角来模拟嘴巴形状，再加以旋转：</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/d9a7f5bcc680645543e926a67bf42afc.jpg"></p>    <p>结果是这样的，那么想要达到我们预期的效果，就需要把上半部分给遮掉，所以我用：after伪元素来实现遮罩效果：</p>    <pre>  <code class="language-css">.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);}    </code></pre>    <p>这个地方就需要慢慢调到合适的位置，模拟图如下：</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/45a2470235b192d4954d33d7ba89a240.jpg"></p>    <p>红色部分就是遮罩了，也是一个矩形，设置了底边框，实现和嘴巴下半部分形成闭合效果，现在我们就可以把颜色改成肤色就行了：</p>    <pre>  <code class="language-css">.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;      }    </code></pre>    <p>效果图如下：</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/7342ff62a4b42405a94d6bd31dc0be33.jpg"></p>    <p>接下来实现双手部分，这一部分不难，就是两个圆角矩形，旋转了角度，然后层级低于身体的层级就行，然后再通过：after伪元素实现胳膊关节处就搞定了。</p>    <pre>  <code class="language-css">.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);      }    </code></pre>    <p>效果图如下：</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/7105a5ef24a8f5359ce9ce499706031f.jpg"></p>    <p>再接下来就是双脚的部分了，主要就是鞋面的设计，我是通过一个矩形，然后设置不同的圆角值，加上一点点的旋转来模拟的，这一块的话，怎么做我都觉得不是很像，所以最后差不多我就妥协了。</p>    <pre>  <code class="language-css">.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);      }    </code></pre>    <p>效果图如下：</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/e7e2f7e7d6f4aceae70d82adceb8f0a2.jpg"></p>    <p>本来是不想画头发的，感觉怪难的，最后尝试了一下，还是能出个样子，那就添加上去吧。原理跟裤子左右两边的实现原理是一样的，只是参数值不一样罢了，大家参考代码琢磨一下：</p>    <pre>  <code class="language-css">.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);      }         阴影部分：         .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;      }    </code></pre>    <p>最后就是最初的效果了：</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/e7e2f7e7d6f4aceae70d82adceb8f0a2.jpg"></p>    <p>这时大家可能会问：然后呢?不是还会动的吗?</p>    <p>是的，这里我就大概讲一下实现的思路吧：</p>    <p>1.头发：头发我想实现的是被小风轻轻地吹起来，然后很快就塌下去，所以吹起和下塌分配的时间很关键;</p>    <p>2.眼睛：眼睛我设想的场景是小黄人在悠闲地走路，然后不时左右看一下两边的风景，所以眼睛转动很悠哉，所以分配的时间可以稍微长一点点;</p>    <p>3.嘴巴：让嘴巴动起来确实比较难，因为要动的话，遮罩也得实时跟着改变，而且不能露馅，所以最后实现的是当它往左边看了一下之后卖了一下萌;</p>    <p>4.双手和双脚：这部分确实很难逼真，本来脚就不是正常的走路状态，所以只能按卓别林老爷爷的走路方式模拟一下，而且左右脚动作是紧接实现而不是同步实现。双手的话，我是简单模拟人在走路时有摆手的自然惯性，而且是左脚配右手，右脚配左手。考虑到它的双手是放在背后的，所以我的摆动幅度设置为非常小，有效果但不明显。</p>    <p>OK，我就直接把动画代码放上来吧：</p>    <pre>  <code class="language-css">.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);          }      }    </code></pre>    <p>篇幅比较大，代码看多了会乱，如果觉得自己懒得整理的话，可以直接到我的github上下载这个简单又好玩的案例吧：https://github.com/JR93/littleHuang</p>    <p> </p>    <p>来自：http://developer.51cto.com/art/201705/538668.htm</p>    <p> </p>