51CTO首页
AI.x社区
博客
学堂
精品班
直播训练营
企业培训
鸿蒙开发者社区
WOT技术大会
AIGC创新中国行
公众号矩阵
移动端
短视频免费课程课程排行直播课软考学堂
全部课程厂商认证IT技术2024年软考PMP项目管理软考资讯
在线学习
文章资源问答课堂专栏直播
51CTO
鸿蒙开发者社区
51CTO技术栈
51CTO官微
51CTO学堂
51CTO博客
CTO训练营
鸿蒙开发者社区订阅号
51CTO题库小程序
51CTO学堂APP
51CTO学堂企业版APP
鸿蒙开发者社区视频号
账号设置 退出

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

作者：郭锦荣
开发 前端
前两天我刚发布了一篇CSS3实现小黄人动画的博客，但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片，并自己用PS抠出需要实现动画的部分，最后才完成的动画效果。

前言

前两天我刚发布了一篇CSS3实现小黄人动画的博客，但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片，并自己用PS抠出需要实现动画的部分，***才完成的动画效果。但是，其实我的初衷是想体验一下用图片做动画的赶脚，但是找不到素材，才无奈用了最笨的方法来满足自己的需求，本想勉强能看就行了。可是呢，还是抵不住自己内心的***，于是乎，用了一个晚上用CSS3画出了小黄人再实现类似的动画效果。

正题

OK，大家看一下下面两张图有什么不同： 

   

 

当然，很多人会说，明显大小不同，嘴巴，头发也是不一样的。但是其实***的不同是，用一个形象一点的例子就是：这是两个孩子，***个是从超市货架上拿的，另外一个是我自己生的。怎么生呢?——用CSS3!

那么生下来得会动啊，不然就夭折了，所以，我就多拍了几个，就变成这样子了：

 

怎么样?虽然手脚动画还是不怎么神似，但人类聪明地大脑还是能看得出啥意思的吧!今天就让我们一起学习如何生出一个小黄人来。

首先，还是直接把HTML结构放出来给大家打量打量：

  1. <div class="wrapper"><!-- 容器 --> 
  2.  
  3.         <div class="littleH"><!-- 小黄人 --> 
  4.  
  5.             <div class="bodyH"><!-- 身体 --> 
  6.  
  7.                 <div class="trousers"><!-- 裤子 --> 
  8.  
  9.                     <div class="condoleBelt"><!-- 吊带 --> 
  10.  
  11.                         <div class="left"></div> 
  12.  
  13.                         <div class="right"></div> 
  14.  
  15.                     </div> 
  16.  
  17.                     <div class="trousers_top"></div><!-- 裤子突出的矩形部分 --> 
  18.  
  19.                     <div class="pocket"></div><!-- 裤袋 --> 
  20.  
  21.                     <!-- 三条线 --> 
  22.  
  23.                     <span class="line_left"></span> 
  24.  
  25.                     <span class="line_right"></span> 
  26.  
  27.                     <span class="line_bottom"></span> 
  28.  
  29.                 </div> 
  30.  
  31.             </div> 
  32.  
  33.             <div class="hair"><!-- 头发 --> 
  34.  
  35.                 <span class="left_hair_one"></span> 
  36.  
  37.                 <span class="left_hair_two"></span> 
  38.  
  39.             </div> 
  40.  
  41.             <div class="eyes"><!-- 眼睛 --> 
  42.  
  43.                 <div class="leftEye"><!-- 左眼 --> 
  44.  
  45.                     <div class="left_blackEye"> 
  46.  
  47.                         <div class="left_white"></div> 
  48.  
  49.                     </div> 
  50.  
  51.                 </div> 
  52.  
  53.                 <div class="rightEye"><!-- 右眼 --> 
  54.  
  55.                     <div class="right_blackEye"> 
  56.  
  57.                         <div class="right_white"></div> 
  58.  
  59.                     </div> 
  60.  
  61.                 </div> 
  62.  
  63.             </div> 
  64.  
  65.             <div class="mouse"><!-- 嘴巴 --> 
  66.  
  67.                 <div class="mouse_shape"></div> 
  68.  
  69.             </div> 
  70.  
  71.             <div class="hands"><!-- 双手 --> 
  72.  
  73.                 <div class="leftHand"></div> 
  74.  
  75.                 <div class="rightHand"></div> 
  76.  
  77.             </div> 
  78.  
  79.             <div class="feet"><!-- 双脚 --> 
  80.  
  81.                 <div class="left_foot"></div> 
  82.  
  83.                 <div class="right_foot"></div> 
  84.  
  85.             </div> 
  86.  
  87.             <div class="groundShadow"></div><!-- 脚底阴影 --> 
  88.  
  89.         </div> 
  90.  
  91.     </div>  

好的，每一处我都标明了它的用途，大家可以稍微理解一下，在头脑里有一个大概的模型或者层次结构。

接下来就是猛料了。。。我将分步讲解，一步一步实现：

首先对容器和整体做一些简单的样式设置：

  1. body{ 
  2.  
  3.     margin: 0; 
  4.  
  5.     padding:0; 
  6.  
  7. } 
  8.  
  9. .wrapper{ 
  10.  
  11.     width: 300px; 
  12.  
  13.     margin:100px auto; 
  14.  
  15. } 
  16.  
  17. .litteH{ 
  18.  
  19.     position: relative; 
  20.  
  21. } 
  22.  
  23. .bodyH{ 
  24.  
  25.     position: absolute; 
  26.  
  27.     width: 240px; 
  28.  
  29.     height: 400px; 
  30.  
  31.     border:5px solid #000; 
  32.  
  33.     border-radius: 115px; 
  34.  
  35.     background: rgb(249,217,70); 
  36.  
  37.     overflow: hidden; 
  38.  
  39.     z-index: 2; 
  40.  
  41. }  

其中.bodyH主要就是绘制小黄人的身体，身体的比例很重要，现在运行看一下效果：

 

OK，身体已经有了，现在赶紧给它穿个裤子吧!

  1. .bodyH .condoleBelt{ 
  2.  
  3.     position: absolute; 
  4.  
  5. } 
  6.  
  7. .bodyH .trousers{ 
  8.  
  9.     position: absolute; 
  10.  
  11.     bottom: 0; 
  12.  
  13.     width: 100%; 
  14.  
  15.     height: 100px; 
  16.  
  17.     border-top: 6px solid #000; 
  18.  
  19.     background: rgb(32,116,160); 
  20.  
  21. } 
  22.  
  23. .trousers_top{ 
  24.  
  25.     width: 160px; 
  26.  
  27.     height: 60px; 
  28.  
  29.     border:6px solid #000; 
  30.  
  31.     border-bottom: none; 
  32.  
  33.     border-radius: 0 0 5px 5px; 
  34.  
  35.     background: rgb(32,116,160); 
  36.  
  37.     position: absolute; 
  38.  
  39.     bottom: 100px; 
  40.  
  41.     left:34px; 
  42.  
  43. }  

其中.trousers_top就是矩形部分，那么穿完裤子是什么样子的呢?

 

 

现在怎么看都像一颗胶囊，不行，赶紧修饰修饰，给它一个吊带，不然裤子会掉呢：

  1. .bodyH .condoleBelt .left, 
  2.  
  3. .bodyH .condoleBelt .right{ 
  4.  
  5.     width: 100px; 
  6.  
  7.     height: 16px; 
  8.  
  9.     border:5px solid #000; 
  10.  
  11.     background: rgb(32,116,160); 
  12.  
  13.     position: absolute; 
  14.  
  15.     top:-90px; 
  16.  
  17.     left:-35px; 
  18.  
  19.     z-index: 2; 
  20.  
  21.     -webkit-transform:rotate(45deg); 
  22.  
  23. } 
  24.  
  25. .bodyH .condoleBelt .left{ 
  26.  
  27.     top:-88px; 
  28.  
  29.     left:165px; 
  30.  
  31.     -webkit-transform:rotate(-45deg); 
  32.  
  33. } 
  34.  
  35. .bodyH .condoleBelt .left:after, 
  36.  
  37. .bodyH .condoleBelt .right:after{ 
  38.  
  39.     content: ''; 
  40.  
  41.     width: 8px; 
  42.  
  43.     height: 8px; 
  44.  
  45.     border-radius: 50%; 
  46.  
  47.     background: #000; 
  48.  
  49.     position: absolute; 
  50.  
  51.     top:4px; 
  52.  
  53.     left:88px; 
  54.  
  55. } 
  56.  
  57.   
  58.  
  59. .bodyH .condoleBelt .left:after{ 
  60.  
  61.     left:5px; 
  62.  
  63. }  

这一块主要就是实现两个吊带，左右各一条，然后我使用：after伪元素来实现吊带上的小黑点：

 

咦，开始有模有样了，接下来我们一鼓作气把裤袋和一下修饰的边边给实现了：

  1. .pocket{ 
  2.  
  3.     width: 60px; 
  4.  
  5.     height: 45px; 
  6.  
  7.     border:6px solid #000; 
  8.  
  9.     border-radius: 0px 0px 25px 25px; 
  10.  
  11.     position: absolute; 
  12.  
  13.     bottom:65px; 
  14.  
  15.     left:84px; 
  16.  
  17. } 
  18.  
  19. .line_right{ 
  20.  
  21.     width: 30px; 
  22.  
  23.     height: 30px; 
  24.  
  25.     border-bottom-left-radius: 100px; 
  26.  
  27.     border-bottom:6px solid #000; 
  28.  
  29.     border-left:6px solid #000; 
  30.  
  31.     position: absolute; 
  32.  
  33.     left: 0; 
  34.  
  35.     bottom:60px; 
  36.  
  37.     -webkit-transform:rotate(-75deg); 
  38.  
  39. } 
  40.  
  41. .line_left{ 
  42.  
  43.     width: 30px; 
  44.  
  45.     height: 30px; 
  46.  
  47.     border-bottom-right-radius: 100px; 
  48.  
  49.     border-bottom:6px solid #000; 
  50.  
  51.     border-right:6px solid #000; 
  52.  
  53.     position: absolute; 
  54.  
  55.     right: 0; 
  56.  
  57.     bottom:63px; 
  58.  
  59.     -webkit-transform:rotate(75deg); 
  60.  
  61. } 
  62.  
  63. .line_bottom{ 
  64.  
  65.     height: 40px; 
  66.  
  67.     border:3px solid #000; 
  68.  
  69.     border-radius: 3px; 
  70.  
  71.     position: absolute; 
  72.  
  73.     left:118px; 
  74.  
  75.     bottom: 0px; 
  76.  
  77. }  

先看效果图： 

OK，两个注意点说一下：

1.我把裤子放在身体里面，然后给.bodyH添加overflow:hidden，这样我们就不用去多虑溢出怎么办，而且很轻松就能实现裤子的效果;

2.可以看到裤子两边有两条有弧度的曲线段，我是通过给矩形某一个角实现圆角效果，然后只设置与这个角相邻的两条边的边框样式，然后旋转一下角度就实现这个效果了，当然只能实现简单一点的效果。

好的，我们继续，接下来先实现以下眼睛部分吧：

  1. .eyes{ 
  2.  
  3.     position: relative; 
  4.  
  5.     z-index: 3; 
  6.  
  7. } 
  8.  
  9. .eyes .leftEye,.eyes .rightEye{ 
  10.  
  11.     width: 85px; 
  12.  
  13.     height: 85px; 
  14.  
  15.     border-radius: 50%; 
  16.  
  17.     border:6px solid #000; 
  18.  
  19.     background: #fff; 
  20.  
  21.     position: absolute; 
  22.  
  23.     top:60px; 
  24.  
  25.     left: 27px; 
  26.  
  27. } 
  28.  
  29. .eyes .leftEye{ 
  30.  
  31.     left: 124px; 
  32.  
  33. } 
  34.  
  35. .eyes .leftEye .left_blackEye, 
  36.  
  37. .eyes .rightEye .right_blackEye{ 
  38.  
  39.     width: 40px; 
  40.  
  41.     height: 40px; 
  42.  
  43.     border-radius: 50%; 
  44.  
  45.     background: #000; 
  46.  
  47.     position: absolute; 
  48.  
  49.     top:24px; 
  50.  
  51.     left:22px; 
  52.  
  53. } 
  54.  
  55. .eyes .leftEye .left_blackEye .left_white, 
  56.  
  57. .eyes .rightEye .right_blackEye .right_white{ 
  58.  
  59.     width: 20px; 
  60.  
  61.     height: 20px; 
  62.  
  63.     border-radius: 50%; 
  64.  
  65.     background: #fff; 
  66.  
  67.     position: absolute; 
  68.  
  69.     top:7px; 
  70.  
  71.     left:17px; 
  72.  
  73. } 
  74.  
  75. .eyes .leftEye .left_blackEye .left_white{ 
  76.  
  77.     top:4px; 
  78.  
  79.     left:17px; 
  80.  
  81. } 
  82.  
  83. .eyes .leftEye:after, 
  84.  
  85. .eyes .rightEye:after{ 
  86.  
  87.     content: ''; 
  88.  
  89.     width: 28px; 
  90.  
  91.     height: 18px; 
  92.  
  93.     background: #000; 
  94.  
  95.     position: absolute; 
  96.  
  97.     left:-30px; 
  98.  
  99.     top:37px; 
  100.  
  101.     -webkit-transform:skewX(20deg) rotate(7deg); 
  102.  
  103. } 
  104.  
  105. .eyes .leftEye:after{ 
  106.  
  107.     left:89px; 
  108.  
  109.     top:37px; 
  110.  
  111.     -webkit-transform:skewX(-20deg) rotate(-7deg); 
  112.  
  113. }  

眼睛部分还是挺好实现的，先画眼镜，然后黑眼珠，再画白点，***我才画的眼镜框，眼睛框我是用：after伪元素实现的。效果图如下：

 

嘴巴是最困惑我的，但还是***还是能实现：

  1. .mouse{ 
  2.  
  3.     position: relative; 
  4.  
  5. } 
  6.  
  7. .mouse .mouse_shape{ 
  8.  
  9.     width: 55px; 
  10.  
  11.     height: 35px; 
  12.  
  13.     border:5px solid #000; 
  14.  
  15.     border-bottom-left-radius: 30px; 
  16.  
  17.     background: #fff; 
  18.  
  19.     position: absolute; 
  20.  
  21.     top:175px; 
  22.  
  23.     left:98px; 
  24.  
  25.     z-index: 3; 
  26.  
  27.     -webkit-transform:rotate(-35deg); 
  28.  
  29. }  

首先也是通过矩形其中一个角实现圆角来模拟嘴巴形状，再加以旋转：

 

结果是这样的，那么想要达到我们预期的效果，就需要把上半部分给遮掉，所以我用：after伪元素来实现遮罩效果：

  1. .mouse .mouse_shape:after{ 
  2.  
  3.     content: ''; 
  4.  
  5.     width: 70px; 
  6.  
  7.     height: 32px; 
  8.  
  9.     border-bottom:5px solid #000; 
  10.  
  11.     border-radius:35px 26px 5px 5px; 
  12.  
  13.     background: red; 
  14.  
  15.     position: absolute; 
  16.  
  17.     top:-16px; 
  18.  
  19.     left:3px; 
  20.  
  21.     -webkit-transform:rotate(34deg);}  

这个地方就需要慢慢调到合适的位置，模拟图如下：

 

红色部分就是遮罩了，也是一个矩形，设置了底边框，实现和嘴巴下半部分形成闭合效果，现在我们就可以把颜色改成肤色就行了：

  1. .mouse .mouse_shape:after{ 
  2.  
  3.     content: ''; 
  4.  
  5.     width: 70px; 
  6.  
  7.     height: 32px; 
  8.  
  9.     border-bottom:5px solid #000; 
  10.  
  11.     border-radius:35px 26px 5px 5px; 
  12.  
  13.     background: rgb(249,217,70); 
  14.  
  15.     position: absolute; 
  16.  
  17.     top:-16px; 
  18.  
  19.     left:3px; 
  20.  
  21.     -webkit-transform:rotate(34deg); 
  22.  
  23.     -webkit-animation: mouse_mask 5s ease-in-out infinite; 
  24.  
  25. }  

效果图如下： 

 

接下来实现双手部分，这一部分不难，就是两个圆角矩形，旋转了角度，然后层级低于身体的层级就行，然后再通过：after伪元素实现胳膊关节处就搞定了。

  1. .hands{ 
  2.  
  3.     position: relative; 
  4.  
  5. } 
  6.  
  7. .hands .leftHand, 
  8.  
  9. .hands .rightHand{ 
  10.  
  11.     width: 80px; 
  12.  
  13.     height: 80px; 
  14.  
  15.     border:6px solid #000; 
  16.  
  17.     border-radius: 25px; 
  18.  
  19.     background: rgb(249,217,70); 
  20.  
  21.     position: absolute; 
  22.  
  23.     top:220px; 
  24.  
  25.     left:-23px; 
  26.  
  27.     -webkit-transform:rotate(40deg); 
  28.  
  29. } 
  30.  
  31. .hands .leftHand{ 
  32.  
  33.     left:182px; 
  34.  
  35.     top:220px; 
  36.  
  37.     -webkit-transform:rotate(-40deg); 
  38.  
  39. } 
  40.  
  41. .hands .leftHand:after, 
  42.  
  43. .hands .rightHand:after{ 
  44.  
  45.     content: ''; 
  46.  
  47.     width: 6px; 
  48.  
  49.     border:3px solid #000; 
  50.  
  51.     border-radius: 3px; 
  52.  
  53.     position: absolute; 
  54.  
  55.     left:13px; 
  56.  
  57.     top:50px; 
  58.  
  59.     -webkit-transform:rotate(90deg); 
  60.  
  61. } 
  62.  
  63.   
  64.  
  65. .hands .leftHand:after{ 
  66.  
  67.     left:53px; 
  68.  
  69.     top:50px; 
  70.  
  71.     -webkit-transform:rotate(-90deg); 
  72.  
  73. }  

效果图如下：

 

再接下来就是双脚的部分了，主要就是鞋面的设计，我是通过一个矩形，然后设置不同的圆角值，加上一点点的旋转来模拟的，这一块的话，怎么做我都觉得不是很像，所以***差不多我就妥协了。

  1. .feet{ 
  2.  
  3.     position: relative; 
  4.  
  5. } 
  6.  
  7. .feet .left_foot, 
  8.  
  9. .feet .right_foot{ 
  10.  
  11.     width: 36px; 
  12.  
  13.     height: 50px; 
  14.  
  15.     border-bottom-right-radius: 6px; 
  16.  
  17.     border-bottom-left-radius: 9px; 
  18.  
  19.     background: #000; 
  20.  
  21.     position: absolute; 
  22.  
  23.     top: 406px; 
  24.  
  25.     left:88px; 
  26.  
  27.     -webkit-transform-origin: right top; 
  28.  
  29. } 
  30.  
  31. .feet .left_foot{ 
  32.  
  33.     border-bottom-right-radius: 9px; 
  34.  
  35.     border-bottom-left-radius: 6px; 
  36.  
  37.     left:130px; 
  38.  
  39.     -webkit-transform-origin: left top; 
  40.  
  41. } 
  42.  
  43. .feet .left_foot:after, 
  44.  
  45. .feet .right_foot:after{ 
  46.  
  47.     content: ''; 
  48.  
  49.     width: 60px; 
  50.  
  51.     height: 35px; 
  52.  
  53.     border-radius: 20px 10px 21px 15px; 
  54.  
  55.     background: #000; 
  56.  
  57.     position: absolute; 
  58.  
  59.     left:-36px; 
  60.  
  61.     top:14.4px; 
  62.  
  63.     -webkit-transform:rotate(5deg); 
  64.  
  65. } 
  66.  
  67. .feet .left_foot:after{ 
  68.  
  69.     border-radius: 10px 20px 15px 21px; 
  70.  
  71.     left:13px; 
  72.  
  73.     -webkit-transform:rotate(-5deg); 
  74.  
  75. }  

效果图如下：

 

本来是不想画头发的，感觉怪难的，***尝试了一下，还是能出个样子，那就添加上去吧。原理跟裤子左右两边的实现原理是一样的，只是参数值不一样罢了，大家参考代码琢磨一下：

  1. .hair{ 
  2.  
  3.     position: relative; 
  4.  
  5. } 
  6.  
  7. .left_hair_one{ 
  8.  
  9.     width: 130px; 
  10.  
  11.     height: 100px; 
  12.  
  13.     border-radius: 50%; 
  14.  
  15.     border-top:8px solid #000; 
  16.  
  17.     position: absolute; 
  18.  
  19.     left:17px; 
  20.  
  21.     top:-17px; 
  22.  
  23.     -webkit-transform:rotate(27deg); 
  24.  
  25. } 
  26.  
  27. .left_hair_two{ 
  28.  
  29.     width: 80px; 
  30.  
  31.     height: 80px; 
  32.  
  33.     border-radius: 50%; 
  34.  
  35.     border-top:6px solid #000; 
  36.  
  37.     position: absolute; 
  38.  
  39.     left:45px; 
  40.  
  41.     top:-10px; 
  42.  
  43.     -webkit-transform:rotate(15deg); 
  44.  
  45. } 
  46.  
  47.  
  48. 阴影部分： 
  49.  
  50.  
  51. .groundShadow{ 
  52.  
  53.     width: 200px; 
  54.  
  55.     height: 2px; 
  56.  
  57.     border-radius: 50%; 
  58.  
  59.     background: rgba(0,0,0,0.3); 
  60.  
  61.     box-shadow: 0 0 2px 4px rgba(0,0,0,0.3); 
  62.  
  63.     position: relative; 
  64.  
  65.     top: 455px; 
  66.  
  67.     left:25px; 
  68.  
  69. }  

***就是最初的效果了：

 

这时大家可能会问：然后呢?不是还会动的吗?

是的，这里我就大概讲一下实现的思路吧：

1.头发：头发我想实现的是被小风轻轻地吹起来，然后很快就塌下去，所以吹起和下塌分配的时间很关键;

2.眼睛：眼睛我设想的场景是小黄人在悠闲地走路，然后不时左右看一下两边的风景，所以眼睛转动很悠哉，所以分配的时间可以稍微长一点点;

3.嘴巴：让嘴巴动起来确实比较难，因为要动的话，遮罩也得实时跟着改变，而且不能露馅，所以***实现的是当它往左边看了一下之后卖了一下萌;

4.双手和双脚：这部分确实很难逼真，本来脚就不是正常的走路状态，所以只能按卓别林老爷爷的走路方式模拟一下，而且左右脚动作是紧接实现而不是同步实现。双手的话，我是简单模拟人在走路时有摆手的自然惯性，而且是左脚配右手，右脚配左手。考虑到它的双手是放在背后的，所以我的摆动幅度设置为非常小，有效果但不明显。

OK，我就直接把动画代码放上来吧：

  1. .left_hair_one{ 
  2.  
  3.     -webkit-animation: lefthair 2s ease-in-out infinite; 
  4.  
  5. } 
  6.  
  7. @-webkit-keyframes lefthair{ 
  8.  
  9.     0%,25%,31%,100%{ 
  10.  
  11.     } 
  12.  
  13.     30%{ 
  14.  
  15.         -webkit-transform: rotate(31deg) translate3d(-3px,-1px,0); 
  16.  
  17.     } 
  18.  
  19. } 
  20.  
  21. .eyes .leftEye .left_blackEye, 
  22.  
  23. .eyes .rightEye .right_blackEye{ 
  24.  
  25.     -webkit-animation: blackeye 5s ease-in infinite; 
  26.  
  27. } 
  28.  
  29. @-webkit-keyframes blackeye{ 
  30.  
  31.     0%,20%,50%,70%,100%{ 
  32.  
  33.         -webkit-transform: translateX(0px); 
  34.  
  35.     } 
  36.  
  37.     30%,40%{ 
  38.  
  39.         -webkit-transform: translateX(15px); 
  40.  
  41.     } 
  42.  
  43.     80%,90%{ 
  44.  
  45.         -webkit-transform: translateX(-15px); 
  46.  
  47.     } 
  48.  
  49. } 
  50.  
  51. .eyes .leftEye .left_blackEye .left_white, 
  52.  
  53. .eyes .rightEye .right_blackEye .right_white{ 
  54.  
  55.     -webkit-animation: whiteeye 5s ease-in-out infinite; 
  56.  
  57. } 
  58.  
  59. @-webkit-keyframes whiteeye{ 
  60.  
  61.     0%,20%,50%,70%,100%{ 
  62.  
  63.         -webkit-transform: translateX(0px); 
  64.  
  65.     } 
  66.  
  67.     30%,40%{ 
  68.  
  69.         -webkit-transform: translate3d(3px,4px,0); 
  70.  
  71.     } 
  72.  
  73.     80%,90%{ 
  74.  
  75.         -webkit-transform: translate3d(-15px,4px,0); 
  76.  
  77.     } 
  78.  
  79. } 
  80.  
  81. .mouse .mouse_shape{ 
  82.  
  83.     -webkit-animation: mouse 5s ease-in-out infinite; 
  84.  
  85. } 
  86.  
  87. @-webkit-keyframes mouse{ 
  88.  
  89.     40%,43%{ 
  90.  
  91.         width: 45px; 
  92.  
  93.         height: 25px; 
  94.  
  95.         top:180px; 
  96.  
  97.     } 
  98.  
  99.     0%,35%,48%,100%{ 
  100.  
  101.         width: 55px; 
  102.  
  103.         height: 35px; 
  104.  
  105.         top:175px; 
  106.  
  107.         -webkit-transform:rotate(-35deg); 
  108.  
  109.     } 
  110.  
  111. } 
  112.  
  113. .mouse .mouse_shape:after{ 
  114.  
  115.     -webkit-animation: mouse_mask 5s ease-in-out infinite; 
  116.  
  117. } 
  118.  
  119. @-webkit-keyframes mouse_mask{ 
  120.  
  121.     40%,43%{ 
  122.  
  123.         width: 60.5px; 
  124.  
  125.         top:-19.3px; 
  126.  
  127.         left:1.5px; 
  128.  
  129.     } 
  130.  
  131.     0%,35%,48%,100%{ 
  132.  
  133.         width: 70px; 
  134.  
  135.         top:-16px; 
  136.  
  137.         left:3px; 
  138.  
  139.         -webkit-transform:rotate(33deg); 
  140.  
  141.     } 
  142.  
  143. } 
  144.  
  145. .hands .rightHand{ 
  146.  
  147.     -webkit-animation:rightHand .8s ease-in-out infinite; 
  148.  
  149. } 
  150.  
  151. @-webkit-keyframes rightHand{ 
  152.  
  153.     0%,50%,100%{ 
  154.  
  155.         -webkit-transform: rotate(40deg); 
  156.  
  157.     } 
  158.  
  159.     30%{ 
  160.  
  161.         -webkit-transform: rotate(37deg) translateX(1px); 
  162.  
  163.     } 
  164.  
  165. } 
  166.  
  167. .hands .leftHand{ 
  168.  
  169.     -webkit-animation:leftHand .8s ease-in-out infinite; 
  170.  
  171. } 
  172.  
  173. @-webkit-keyframes leftHand{ 
  174.  
  175.     0%,50%,100%{ 
  176.  
  177.         -webkit-transform: rotate(-40deg); 
  178.  
  179.     } 
  180.  
  181.     80%{ 
  182.  
  183.         -webkit-transform: rotate(-37deg) translateX(-1px); 
  184.  
  185.     } 
  186.  
  187. } 
  188.  
  189. .feet .right_foot{ 
  190.  
  191.     -webkit-animation: rightfoot .8s ease-in-out infinite; 
  192.  
  193. } 
  194.  
  195. @-webkit-keyframes rightfoot{ 
  196.  
  197.     0%,50%,100%{ 
  198.  
  199.         -webkit-transform: rotate(0deg); 
  200.  
  201.     } 
  202.  
  203.     80%{ 
  204.  
  205.         -webkit-transform: rotate(10deg); 
  206.  
  207.     } 
  208.  
  209. } 
  210.  
  211. .feet .left_foot{ 
  212.  
  213.     -webkit-animation: leftfoot .8s ease-in-out infinite; 
  214.  
  215. } 
  216.  
  217. @-webkit-keyframes leftfoot{ 
  218.  
  219.     0%,50%,100%{ 
  220.  
  221.         -webkit-transform: rotate(0deg); 
  222.  
  223.     } 
  224.  
  225.   
  226.  
  227.     30%{ 
  228.  
  229.         -webkit-transform: rotate(-10deg); 
  230.  
  231.     } 
  232.  
  233. }  

篇幅比较大，代码看多了会乱，如果觉得自己懒得整理的话，可以直接到我的github上下载这个简单又好玩的案例吧：https://github.com/JR93/littleHuang 

责任编辑：庞桂玉 来源： 前端大全
CSS3小黄人动画
相关推荐
使用CSS3画出一个叮当猫
刚学习了这个案例，然后觉得比较好玩，就练习了一下。然后发现其实也不难，如果你经常使用PS或者Flash的话，应该就会知道画个叮当猫是很容易的事，至少我是这么觉得。

2015-04-23 15:40:59

CSS3叮当猫
CSS3 2D和3D图形与动画效果
本文包含定义CSS3选择器来创建3D效果和3D动画效果的示例。具体来说，您将学习如何使用CSS3过渡、CSS3keyframe规则和CSS3函数scale3d()、rotate3d()、和translate3d()，它们使您能够使用纯CSS3创建一个有动画效果的3D立方体。本文中的代码示例和图像摘自图书HTML5CanvasandCSS3GraphicsPrimer（在本文末尾处提供了更多详细信息）。

2013-01-30 16:15:40

adobeHTML5css3
8 个超炫酷的纯 CSS3 动画及源码分享
在现代网页中，我们已经越来越习惯使用大量的CSS3元素，而现在的浏览器也基本都支持CSS3，所以很多时候我们不妨思考一下是否可以用纯CSS3制作一些有趣或者实用的网页。本文要分享8个超炫酷的纯CSS3动画，有几个非常经典，比如大象走路的那个，如果你对CSS3感兴趣，赶紧来看看吧。

2015-12-01 09:52:03

CSS3动画源码
纯CSS实现跑马灯效果，CSS动画知识是该补一补了
最近看一个网站的时候，发现一个效果类似于广告灯的感觉，挺不错的，于是就想用纯CSS来实现这个效果，顺便提升一下自己的CSS动画技能

2023-11-01 08:33:45

CSS动画效果
一组梦幻般的CSS3动画按钮效果
这些精美的效果用到了CSS3borderradius（圆角）、boxshadow（阴影）、transition（变形）、transform（转换）和animation（动画）等特性，公共部分的完整代码如下。

2012-12-26 10:34:56

CSSWeb前端
详解CSS3中的Transition：平滑过渡与动画效果
CSS3Transition是一种简洁高效的动画解决方案，尤其适用于那些只需简单过渡效果的场景。通过灵活运用Transition，我们可以轻松构建出更加生动有趣的Web界面，进一步提升用户体验。

2024-03-28 09:11:24

CSS3TransitionCSS属性
创建CSS3漂亮的动画菜单
我希望这些css3菜单示例会派上用场也许你没有灵感，创建您自己的导航菜单。(谷歌,火狐浏览器最佳),喜欢这个效果的话欢迎留言交流。

2012-09-13 09:24:31

CSSJSjQ
HarmonyOS - 纯CSS实现吹灭蜡烛动画
为了体验鸿蒙应用开发，决定动手实现一个案例——通过Css动画实现吹灭蜡烛动画，看了一下鸿蒙应用开发文档，有js和ets两种开发方式，综合考量了一下，决定采用js方式实现。

2022-08-29 17:39:53

应用开发css动画
纯CSS实现常见的UI效果
在用纯CSS实现这些效果之前，笔者先介绍几个常用的SCSSMixin和一个得力武器，用它们来进行创作将会事半功倍。

2021-01-19 12:16:10

CSS前端UI
纯CSS方式实现CSS动画的暂停与播放！
使用纯CSS的方法，能否暂停、播放CSS动画看起来不可能，至少很麻烦。本文介绍代码来实现了纯CSS方式实现CSS动画的暂停与播放。

2017-04-27 14:05:59

CSS动画前端
CSS3变换 教你简单快速实现简单的变换效果
我们需要的是快速而简单的方法来给页面添加简单的变换(transition)效果。在本文中，你会发现很有用的关于CSS变换(transition)以及如何使用它们的信息

2011-02-17 10:54:59

CSS3变换 简单快捷
一个栗子上手CSS3动画
本篇文章不一一列举CSS3动画的属性，若需要了解API，可前往MDN。

2017-05-11 15:20:52

CSS3动画前端
前端实战：使用CSS3实现类在线直播的队列动画
大家都知道在现代的Web开发中,我们能使用Css实现的效果尽量不要用Js,所以我们应该优先考虑用Css3来实现,但是我们要结合数据流才能实现真正的队列动画,所以我们可以利用MVVM框架便捷的数据驱动模型来控制动画的走向。

2021-09-08 22:28:13

前端Css3动画
用 CSS3 和 JavaScript 制作径向动画菜单
今天，让我们来看看：如何使用CSS3和JavaScript轻松地实现一个简单的径向动画菜单。

2014-04-29 10:39:27

CSS3JavaScript
44个惊人的超炫CSS3动画演示
或许你已经看过很多关于CSS3动画的技术，包括前端观察之前发表的一些，那么现在就请看一看CSS3动画的魅力吧。这里是一辑47个令人瞠目结舌的CSS3动画演示。他们演示了CSS3能给我们带来的巨大的可能性。

2011-06-29 13:22:58

CSS3
前端: 轻松教你使用纯css实现水波动画
下面就是笔者就来带大家介绍如何用css3实现H5Dooring编辑器中的水波动画。

2022-03-28 08:44:15

css3水波动画
前端: 轻松教你使用纯css实现水波动画
css3给我们前端开发带来了很多便利,我们可以使用css3的新特性实现各种形状和动效,接下来笔者就来带大家介绍如何用css3实现H5Dooring编辑器中的水波动画.

2021-02-09 07:26:38

前端css技术热点
500 多个纯 CSS 实现的 Loading 效果，炫酷！
使用clippath​属性定义一个多边形裁剪路径，形状是一个从左上角到右下角的三角形。然后，使用动画关键帧keyframes定义了一个名为"l2"的动画，在动画的关键帧定义中，根据时间的百分比，通过不断改变clippath属性的值来实现裁剪路径的变化。

2023-10-08 20:32:59

CSS定义Loading
使用css3的动画模拟太阳系恒星公转
本文介绍使用css3的animation画一个太阳系恒星公转的动画，再加以改进，讨论如何画椭圆的运行轨迹。然后分析京东和人人网使用animation的实际案例，最后结合css3的clippath做一些比较特别的动画。

2015-10-14 09:50:11

css3动画模拟
25个CSS3高级用户界面特效教程
本文中介绍了25个CSS3的高级用户界面特效，其中包括SVG&CSS交互图表、CSS33D动画直方图、CSS3注释层效果、CSS3动画目录选项卡等

2013-04-10 09:28:24

CSS3CSS
点赞
收藏

51CTO技术栈公众号

业务
速览
在线客服