非常震撼的纯CSS3人物行走动画

非常震撼的纯CSS3人物行走动画

本文分享给大家的是一个用纯CSS3实现的人物行走动画，在没有使用JavaScript的情况下，用CSS3技术将人物行走的姿态描绘得非常逼真。

其实动画实现的原理也是比较简单的，将人物行走时的状态分割成多张图片，然后利用CSS3的动画属性将这些图片串联起来形成人物行走动画效果。

HTML代码

XML/HTML Code复制内容到剪贴板

1. <div id="canvas">  
2.         <div class="sky">  
3.             <div class="cloud-1"></div>  
4.             <div class="cloud-2"></div>  
5.             <div class="cloud-3"></div>  
6.             <div class="cloud-4"></div>  
7.             <div class="cloud-5"></div>  
8.             <div class="cloud-6"></div>  
9.             <div class="cloud-7"></div>  
10.             <div class="cloud-8"></div>  
11.         </div>  
12.         <div class="horizon"></div>  
13.         <div class="ground">  
14.             <div class="sign-best"></div>  
15.             <div class="sign-no-js"></div>  
16.             <div class="sign-lots-of-divs"></div>  
17.             <div class="sign-all-css"></div>  
18.         </div>  
19.         <!-- skeleton and shadow -->  
20.         <div class="shadow"></div>  
21.         <div class="me">  
22.   
23.             <div class="torso">  
24.                 <div class="left leg">  
25.                     <div class="left thigh">  
26.                         <div class="left shin">  
27.                             <div class="left foot">  
28.                                 <div class="left toes"></div>  
29.                             </div>  
30.                         </div>  
31.                     </div>  
32.                 </div>  
33.  <!-- left leg -->  
34.   
35.                 <div class="right leg">  
36.                     <div class="right thigh">  
37.                         <div class="right shin">  
38.                             <div class="right foot">  
39.                                 <div class="right toes"></div>  
40.                             </div>  
41.                         </div>  
42.                     </div>  
43.                 </div>  
44.  <!-- right leg -->  
45.   
46.                 <div class="left arm">  
47.                     <div class="left bicep">  
48.                         <div class="left forearm"></div>  
49.                     </div>  
50.                 </div>  
51.  <!-- left arm -->  
52.   
53.                 <div class="right arm">  
54.                     <div class="right bicep">  
55.                         <div class="right forearm"></div>  
56.                     </div>  
57.                 </div>  
58.  <!-- right arm -->  
59.   
60.             </div>  
61.  <!-- torso -->  
62.         </div>  
63.  <!-- me -->  
64.   
65.         <div class="overlay"></div>  
66.     </div>  

基本CSS代码

CSS Code复制内容到剪贴板

1. #canvas {   
2.     height: 600px;   
3.     width: 760px;   
4.     margin: 0;   
5.     padding: 0;   
6.     position: relative;   
7.     overflow: hidden;   
8. }   
9.   
10. #canvas div {   
11.     position: absolute;   
12.     -webkit-animation-iteration-count: infinite;   
13.     -moz-animation-iteration-count: infinite;   
14.     -ms-animation-iteration-count: infinite;   
15.     -o-animation-iteration-count: infinite;   
16.     animation-iteration-count: infinite;   
17.   
18.     -webkit-animation-timing-function: linear;   
19.     -moz-animation-timing-function: linear;   
20.     -ms-animation-timing-function: linear;   
21.     -o-animation-timing-function: linear;   
22.     animation-timing-function: linear;   
23. }   
24.   
25. #canvas:target div:not(.overlay) {   
26.     border: 1px solid black;   
27. }   
28.   
29. #canvas:target div.me div{   
30.     background: rgba(255, 255, 255, 0.25);   
31. }   
32.   
33. .me {   
34.     top: 50px; left: 350px;   
35.     -webkit-animation-name: me;   
36.     -moz-animation-name: me;   
37.     -ms-animation-name: me;   
38.     -o-animation-name: me;   
39.     animation-name: me;   
40. }   
41.   
42. .me, .me div {   
43.     background-repeat: no-repeat;   
44.     -webkit-animation-duration: 1750ms;   
45.     -moz-animation-duration: 1750ms;   
46.     -ms-animation-duration: 1750ms;   
47.     -o-animation-duration: 1750ms;   
48.     animation-duration: 1750ms;   
49. }   
50.   
51. .torso {   
52.     width: 86px; height: 275px;   
53.     background-image: url(images/me/torso.png);   
54. }   
55.   
56. .arm {   
57.     left: 12px;   
58.     -webkit-transform-origin: 20px 10px;   
59.     -moz-transform-origin: 20px 10px;   
60.     -ms-transform-origin: 20px 10px;   
61.     -o-transform-origin: 20px 10px;   
62.     transform-origin: 20px 10px;   
63. }   
64.   
65. .rightright.arm {   
66.     top: 93px;   
67.     -webkit-animation-name: rightright-bicep;   
68.     -moz-animation-name: rightright-bicep;   
69.     -ms-animation-name: rightright-bicep;   
70.     -o-animation-name: rightright-bicep;   
71.     animation-name: rightright-bicep;   
72. }   
73. .left.arm {   
74.     top: 87px;   
75.     -webkit-animation-name: left-bicep;   
76.     -moz-animation-name: left-bicep;   
77.     -ms-animation-name: left-bicep;   
78.     -o-animation-name: left-bicep;   
79.     animation-name: left-bicep;   
80. }   
81.   
82. .bicep {   
83.     height: 124px; width: 51px;   
84. }   
85.   
86. .rightright.bicep { background-image: url(images/me/rightright-bicep.png); }   
87. .left.bicep { background-image: url(images/me/left-bicep.png); }   
88.   
89. .forearm {   
90.     top: 108px; left: 14px;   
91.     width: 36px; height: 121px;   
92.     -webkit-transform-origin: 3px 7px;   
93.     -moz-transform-origin: 3px 7px;   
94.     -ms-transform-origin: 3px 7px;   
95.     -o-transform-origin: 3px 7px;   
96.     transform-origin: 3px 7px;   
97. }   
98.   
99. .rightright.forearm {   
100.     background-image: url(images/me/rightright-forearm.png);   
101.     -webkit-animation-name: rightright-forearm;   
102.     -moz-animation-name: rightright-forearm;   
103.     -ms-animation-name: rightright-forearm;   
104.     -o-animation-name: rightright-forearm;   
105.     animation-name: rightright-forearm;   
106. }   
107.   
108. .left.forearm {   
109.     background-image: url(images/me/left-forearm.png);   
110.     -webkit-animation-name: left-forearm;   
111.     -moz-animation-name: left-forearm;   
112.     -ms-animation-name: left-forearm;   
113.     -o-animation-name: left-forearm;   
114.     animation-name: left-forearm;   
115. }   
116.   
117. .leg {   
118.     left: 6px;   
119.     -webkit-transform-origin: 30px 20px;   
120.     -moz-transform-origin: 30px 20px;   
121.     -ms-transform-origin: 30px 20px;   
122.     -o-transform-origin: 30px 20px;   
123.     transform-origin: 30px 20px;   
124.     -webkit-animation-name: thigh;   
125.     -moz-animation-name: thigh;   
126.     -ms-animation-name: thigh;   
127.     -o-animation-name: thigh;   
128.     animation-name: thigh;   
129. }   
130.   
131. .rightright.leg {   
132.     top: 235px;   
133.     -webkit-animation-name: rightright-thigh;   
134.     -moz-animation-name: rightright-thigh;   
135.     -ms-animation-name: rightright-thigh;   
136.     -o-animation-name: rightright-thigh;   
137.     animation-name: rightright-thigh;   
138. }   
139.   
140. .left.leg {   
141.     top: 225px;   
142.     -webkit-animation-name: left-thigh;   
143.     -moz-animation-name: left-thigh;   
144.     -ms-animation-name: left-thigh;   
145.     -o-animation-name: left-thigh;   
146.     animation-name: left-thigh;   
147. }   
148.   
149. .thigh {   
150.     width: 70px; height: 145px;   
151. }   
152.   
153. .left.thigh { background-image: url(images/me/left-thigh.png); }   
154. .rightright.thigh { background-image: url(images/me/rightright-thigh.png); }   
155.   
156. .shin {   
157.     top: 115px;   
158.     width: 50px; height: 170px;   
159.     background-image: url(images/me/shin.png);   
160.     -webkit-transform-origin: 30px 25px;   
161.     -moz-transform-origin: 30px 25px;   
162.     -ms-transform-origin: 30px 25px;   
163.     -o-transform-origin: 30px 25px;   
164.     transform-origin: 30px 25px;   
165. }   
166.   
167. .rightright.shin {   
168.     -webkit-animation-name: rightright-shin;   
169.     -moz-animation-name: rightright-shin;   
170.     -ms-animation-name: rightright-shin;   
171.     -o-animation-name: rightright-shin;   
172.     animation-name: rightright-shin;   
173. }   
174. .left.shin {   
175.     -webkit-animation-name: left-shin;   
176.     -moz-animation-name: left-shin;   
177.     -ms-animation-name: left-shin;   
178.     -o-animation-name: left-shin;   
179.     animation-name: left-shin;   
180. }   
181.   
182. .foot {   
183.     top: 155px; left: 2px;   
184.     width: 67px; height: 34px;   
185.     background-image: url(images/me/foot.png);   
186.     -webkit-transform-origin: 0 50%;   
187.     -moz-transform-origin: 0 50%;   
188.     -ms-transform-origin: 0 50%;   
189.     -o-transform-origin: 0 50%;   
190.     transform-origin: 0 50%;   
191. }   
192.   
193. .rightright.foot {   
194.     -webkit-animation-name: rightright-foot;   
195.     -moz-animation-name: rightright-foot;   
196.     -ms-animation-name: rightright-foot;   
197.     -o-animation-name: rightright-foot;   
198.     animation-name: rightright-foot;   
199. }   
200. .left.foot {   
201.     -webkit-animation-name: left-foot;   
202.     -moz-animation-name: left-foot;   
203.     -ms-animation-name: left-foot;   
204.     -o-animation-name: left-foot;   
205.     animation-name: left-foot;   
206. }   
207.   
208. .toes {   
209.     top: 9px; left: 66px;   
210.     width: 28px; height: 25px;   
211.     background-image: url(images/me/toes.png);   
212.     -webkit-transform-origin: 0% 100%;   
213.     -moz-transform-origin: 0% 100%;   
214.     -ms-transform-origin: 0% 100%;   
215.     -o-transform-origin: 0% 100%;   
216.     transform-origin: 0% 100%;   
217. }   
218.   
219. .rightright.toes {   
220.     -webkit-animation-name: rightright-toes;   
221.     -moz-animation-name: rightright-toes;   
222.     -ms-animation-name: rightright-toes;   
223.     -o-animation-name: rightright-toes;   
224.     animation-name: rightright-toes;   
225. }   
226. .left.toes {   
227.     -webkit-animation-name: left-toes;   
228.     -moz-animation-name: left-toes;   
229.     -ms-animation-name: left-toes;   
230.     -o-animation-name: left-toes;   
231.     animation-name: left-toes;   
232. }   
233.   
234. .shadow {   
235.     width: 200px; height: 70px;   
236.     left: 270px; bottombottom: 5px;   
237.     background-image: url(images/misc/shadow.png);   
238.     -webkit-animation-name: shadow;   
239.     -moz-animation-name: shadow;   
240.     -ms-animation-name: shadow;   
241.     -o-animation-name: shadow;   
242.     animation-name: shadow;   
243. }   
244.   
245. /* setting proper z-indexes so that limbs show up correctly */  
246.   
247. div.rightright.arm { z-index: 1; }   
248. div.left.arm { z-index: -3; }   
249. div.arm > div.bicep > div.forearm { z-index: -1; }   
250.   
251. div.rightright.leg { z-index: -1; }   
252. div.left.leg { z-index: -2; }   
253. div.leg > div.thigh > div.shin { z-index: -1; }   
254.   
255. .overlay {   
256.     width: 100%; height: 100%;   
257.     background: url(images/misc/gradient-left.png) repeat-y top left,   
258.                 url(images/misc/gradient-rightright.png) repeat-y top rightright;   
259. }   
260.   
261. .sky div {   
262.     background-repeat: no-repeat;   
263.     -webkit-animation-name: prop-1200;   
264.     -moz-animation-name: prop-1200;   
265.     -ms-animation-name: prop-1200;   
266.     -o-animation-name: prop-1200;   
267.     animation-name: prop-1200;   
268. }   
269.   
270. .cloud-1, .cloud-2 {   
271.     width: 82px; height: 90px;   
272.     background-image: url(images/clouds/1.png);   
273.     -webkit-animation-duration: 120s;   
274.     -moz-animation-duration: 120s;   
275.     -ms-animation-duration: 120s;   
276.     -o-animation-duration: 120s;   
277.     animation-duration: 120s;   
278. }   
279.   
280. .cloud-3, .cloud-4 {   
281.     top: 70px;   
282.     width: 159px; height: 90px;   
283.     background-image: url(images/clouds/2.png);   
284.     -webkit-animation-duration: 80s;   
285.     -moz-animation-duration: 80s;   
286.     -ms-animation-duration: 80s;   
287.     -o-animation-duration: 80s;   
288.     animation-duration: 80s;   
289. }   
290.   
291. .cloud-5, .cloud-6 {   
292.     top: 30px;   
293.     width: 287px; height: 62px;   
294.     background-image: url(images/clouds/3.png);   
295.     -webkit-animation-duration: 140s;   
296.     -moz-animation-duration: 140s;   
297.     -ms-animation-duration: 140s;   
298.     -o-animation-duration: 140s;   
299.     animation-duration: 140s;   
300. }   
301.   
302. .cloud-7, .cloud-8 {   
303.     top: 100px;   
304.     width: 94px; height: 81px;   
305.     background-image: url(images/clouds/4.png);   
306.     -webkit-animation-duration: 90s;   
307.     -moz-animation-duration: 90s;   
308.     -ms-animation-duration: 90s;   
309.     -o-animation-duration: 90s;   
310.     animation-duration: 90s;   
311. }   
312.   
313. .cloud-1 { left: 0px; }   
314. .cloud-2 { left: 1200px; }   
315.   
316. .cloud-3 { left: 250px; }   
317. .cloud-4 { left: 1450px; }   
318.   
319. .cloud-5 { left: 500px; }   
320. .cloud-6 { left: 1700px; }   
321.   
322. .cloud-7 { left: 950px; }   
323. .cloud-8 { left: 2150px; }   
324.   
325. .horizon {   
326.     top: 350px;   
327.     width: 1800px; height: 50px;   
328.     background: url(images/misc/horizon.png) repeat-x;   
329.     -webkit-animation-name: prop-600;   
330.     -moz-animation-name: prop-600;   
331.     -ms-animation-name: prop-600;   
332.     -o-animation-name: prop-600;   
333.     animation-name: prop-600;   
334.     -webkit-animation-duration: 40s;   
335.     -moz-animation-duration: 40s;   
336.     -ms-animation-duration: 40s;   
337.     -o-animation-duration: 40s;   
338.     animation-duration: 40s;   
339. }   
340.   
341. .ground div {   
342.     background-repeat: no-repeat;   
343.     -webkit-animation-name: prop-2000;   
344.     -moz-animation-name: prop-2000;   
345.     -ms-animation-name: prop-2000;   
346.     -o-animation-name: prop-2000;   
347.     animation-name: prop-2000;   
348. }   
349.   
350. .sign-all-css {   
351.     width: 160px; height: 188px;   
352.     top: 325px; left: 1600px;   
353.     background-image: url(images/signs/all-css.png);   
354.     -webkit-animation-duration: 35s;   
355.     -moz-animation-duration: 35s;   
356.     -ms-animation-duration: 35s;   
357.     -o-animation-duration: 35s;   
358.     animation-duration: 35s;   
359. }   
360.   
361. .sign-lots-of-divs {   
362.     width: 102px; height: 120px;   
363.     top: 345px; left: 1150px;   
364.     background-image: url(images/signs/lots-of-divs.png);   
365.     -webkit-animation-duration: 56s;   
366.     -moz-animation-duration: 56s;   
367.     -ms-animation-duration: 56s;   
368.     -o-animation-duration: 56s;   
369.     animation-duration: 56s;   
370. }   
371.   
372. .sign-no-js {   
373.     width: 65px; height: 77px;   
374.     top: 348px; left: 1150px;   
375.     background-image: url(images/signs/no-js.png);   
376.     -webkit-animation-duration: 71s;   
377.     -moz-animation-duration: 71s;   
378.     -ms-animation-duration: 71s;   
379.     -o-animation-duration: 71s;   
380.     animation-duration: 71s;   
381. }   
382.   
383. .sign-best {   
384.     width: 43px; height: 50px;   
385.     top: 350px; left: 1000px;   
386.     background-image: url(images/signs/best.png);   
387.     -webkit-animation-duration: 95s;   
388.     -moz-animation-duration: 95s;   
389.     -ms-animation-duration: 95s;   
390.     -o-animation-duration: 95s;   
391.     animation-duration: 95s;   
392. }   
393.   

CSS动画相关代码

CSS Code复制内容到剪贴板

1. @-webkit-keyframes me {   
2.     0% { -webkit-transform:   rotate(5deg) translate( 5px,   0px); }   
3.     25% { -webkit-transform:  rotate(5deg) translate(-5px, -14px); }   
4.     50% { -webkit-transform:  rotate(5deg) translate( 5px,   0px); }   
5.     75% { -webkit-transform:  rotate(5deg) translate(-5px, -14px); }   
6.     100% { -webkit-transform: rotate(5deg) translate( 5px,   0px); }   
7. }   
8.   
9. @-webkit-keyframes rightright-bicep {   
10.     0%   { -webkit-transform: rotate(26deg); }   
11.     50%  { -webkit-transform: rotate(-20deg); }   
12.     100% { -webkit-transform: rotate(26deg); }   
13. }   
14.   
15. @-webkit-keyframes left-bicep {   
16.     0%   { -webkit-transform: rotate(-20deg); }   
17.     50%  { -webkit-transform: rotate(26deg); }   
18.     100% { -webkit-transform: rotate(-20deg); }   
19. }   
20.   
21. @-webkit-keyframes rightright-forearm {   
22.     0%   { -webkit-transform: rotate(-10deg); }   
23.     50%  { -webkit-transform: rotate(-45deg); }   
24.     100% { -webkit-transform: rotate(-10deg); }   
25. }   
26.   
27. @-webkit-keyframes left-forearm {   
28.     0%   { -webkit-transform: rotate(-45deg); }   
29.     50%  { -webkit-transform: rotate(-10deg); }   
30.     100% { -webkit-transform: rotate(-45deg); }   
31. }   
32.   
33. @-webkit-keyframes rightright-thigh {   
34.     0%   { -webkit-transform: rotate(-45deg); }   
35.     50%  { -webkit-transform: rotate(10deg); }   
36.     100% { -webkit-transform: rotate(-45deg); }   
37. }   
38.   
39. @-webkit-keyframes left-thigh {   
40.     0%   { -webkit-transform: rotate(10deg); }   
41.     50%  { -webkit-transform: rotate(-45deg); }   
42.     100% { -webkit-transform: rotate(10deg); }   
43. }   
44.   
45. @-webkit-keyframes rightright-shin {   
46.     0%   { -webkit-transform: rotate(30deg); }   
47.     25%  { -webkit-transform: rotate(20deg); }   
48.     50%  { -webkit-transform: rotate(20deg); }   
49.     75%  { -webkit-transform: rotate(85deg); }   
50.     100% { -webkit-transform: rotate(30deg); }   
51. }   
52.   
53. @-webkit-keyframes left-shin {   
54.     0%   { -webkit-transform: rotate(20deg); }   
55.     25%  { -webkit-transform: rotate(85deg); }   
56.     50%  { -webkit-transform: rotate(30deg); }   
57.     75%  { -webkit-transform: rotate(20deg); }   
58.     100% { -webkit-transform: rotate(20deg); }   
59. }   
60.   
61. @-webkit-keyframes rightright-foot {   
62.     0%   { -webkit-transform: rotate(-5deg); }   
63.     25%  { -webkit-transform: rotate(-7deg); }   
64.     50%  { -webkit-transform: rotate(-16deg); }   
65.     75%  { -webkit-transform: rotate(-10deg); }   
66.     100% { -webkit-transform: rotate(-5deg); }   
67. }   
68.   
69. @-webkit-keyframes left-foot {   
70.     0%   { -webkit-transform: rotate(-16deg); }   
71.     25%  { -webkit-transform: rotate(-10deg); }   
72.     50%  { -webkit-transform: rotate(-5deg); }   
73.     75%  { -webkit-transform: rotate(-7deg); }   
74.     100% { -webkit-transform: rotate(-16deg); }   
75. }   
76.   
77. @-webkit-keyframes rightright-toes {   
78.     0%   { -webkit-transform: rotate(0deg); }   
79.     25%  { -webkit-transform: rotate(-10deg); }   
80.     50%  { -webkit-transform: rotate(-10deg); }   
81.     75%  { -webkit-transform: rotate(-25deg); }   
82.     100% { -webkit-transform: rotate(0deg); }   
83. }   
84.   
85. @-webkit-keyframes left-toes {   
86.     0%   { -webkit-transform: rotate(-10deg); }   
87.     25%  { -webkit-transform: rotate(-25deg); }   
88.     50%  { -webkit-transform: rotate(0deg); }   
89.     75%  { -webkit-transform: rotate(-10deg); }   
90.     100% { -webkit-transform: rotate(-10deg); }   
91. }   
92.   
93. @-webkit-keyframes shadow {   
94.     0%   { opacity: 1; }   
95.     25%  { opacity: 0.75; }   
96.     50%  { opacity: 1; }   
97.     75%  { opacity: 0.75; }   
98.     100% { opacity: 1; }   
99. }   
100.   
101. @-webkit-keyframes prop-600 {   
102.     0%   { -webkit-transform: translateX(0px); }   
103.     100% { -webkit-transform: translateX(-600px); }   
104. }   
105.   
106. @-webkit-keyframes prop-1200 {   
107.     0%   { -webkit-transform: translateX(0px); }   
108.     100% { -webkit-transform: translateX(-1200px); }   
109. }   
110.   
111. @-webkit-keyframes prop-2000 {   
112.     0%   { -webkit-transform: translateX(0px); }   
113.     100% { -webkit-transform: translateX(-2000px); }   
114. }   

以上就是本文的全部内容，希望对大家的学习有所帮助。