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

前言

前两天我刚发布了一篇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

作者：郭锦荣

来源：51CTO