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

互联网
夏日的草原，早晨空气格外清新，我缠着父亲在草原上漫步。幽幽的草香迎面拂来，红艳艳。朝阳正从地平线上冉冉升起，为辽阔的草原镀上一层金色。草叶上的露珠，像镶在翡翠上的珍珠，闪着五颜六色的光华。我看到草丛中夹着许多粉红色、白色、黄色或是蓝色的不知名的花，把草原装扮得十分美丽。

本文分享给大家的是一个用纯CSS3实现的人物行走动画，在没有使用JavaScript的情况下，用CSS3技术将人物行走的姿态描绘得非常逼真。其实动画实现的原理也是比较简单的，将人物行走时的状态分割成多张图片，然后利用CSS3的动画属性将这些图片串联起来形成人物行走动画效果。

HTML代码

XML/HTML Code复制内容到剪贴板
  1. <divid="canvas">
  2. <divclass="sky">
  3. <divclass="cloud-1"></div>
  4. <divclass="cloud-2"></div>
  5. <divclass="cloud-3"></div>
  6. <divclass="cloud-4"></div>
  7. <divclass="cloud-5"></div>
  8. <divclass="cloud-6"></div>
  9. <divclass="cloud-7"></div>
  10. <divclass="cloud-8"></div>
  11. </div>
  12. <divclass="horizon"></div>
  13. <divclass="ground">
  14. <divclass="sign-best"></div>
  15. <divclass="sign-no-js"></div>
  16. <divclass="sign-lots-of-divs"></div>
  17. <divclass="sign-all-css"></div>
  18. </div>
  19. <!--skeletonandshadow-->
  20. <divclass="shadow"></div>
  21. <divclass="me">
  23. <divclass="torso">
  24. <divclass="leftleg">
  25. <divclass="leftthigh">
  26. <divclass="leftshin">
  27. <divclass="leftfoot">
  28. <divclass="lefttoes"></div>
  29. </div>
  30. </div>
  31. </div>
  32. </div>
  33. <!--leftleg-->
  35. <divclass="rightleg">
  36. <divclass="rightthigh">
  37. <divclass="rightshin">
  38. <divclass="rightfoot">
  39. <divclass="righttoes"></div>
  40. </div>
  41. </div>
  42. </div>
  43. </div>
  44. <!--rightleg-->
  46. <divclass="leftarm">
  47. <divclass="leftbicep">
  48. <divclass="leftforearm"></div>
  49. </div>
  50. </div>
  51. <!--leftarm-->
  53. <divclass="rightarm">
  54. <divclass="rightbicep">
  55. <divclass="rightforearm"></div>
  56. </div>
  57. </div>
  58. <!--rightarm-->
  60. </div>
  61. <!--torso-->
  62. </div>
  63. <!--me-->
  65. <divclass="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. }
  10. #canvasdiv{
  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;
  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. }
  25. #canvas:targetdiv:not(.overlay){
  26. border:1pxsolidblack;
  27. }
  29. #canvas:targetdiv.mediv{
  30. background:rgba(255,255,255,0.25);
  31. }
  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. }
  42. .me,.mediv{
  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. }
  51. .torso{
  52. width:86px;height:275px;
  53. background-image:url(images/me/torso.png);
  54. }
  56. .arm{
  57. left:12px;
  58. -webkit-transform-origin:20px10px;
  59. -moz-transform-origin:20px10px;
  60. -ms-transform-origin:20px10px;
  61. -o-transform-origin:20px10px;
  62. transform-origin:20px10px;
  63. }
  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. }
  82. .bicep{
  83. height:124px;width:51px;
  84. }
  86. .rightright.bicep{background-image:url(images/me/rightright-bicep.png);}
  87. .left.bicep{background-image:url(images/me/left-bicep.png);}
  89. .forearm{
  90. top:108px;left:14px;
  91. width:36px;height:121px;
  92. -webkit-transform-origin:3px7px;
  93. -moz-transform-origin:3px7px;
  94. -ms-transform-origin:3px7px;
  95. -o-transform-origin:3px7px;
  96. transform-origin:3px7px;
  97. }
  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. }
  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. }
  117. .leg{
  118. left:6px;
  119. -webkit-transform-origin:30px20px;
  120. -moz-transform-origin:30px20px;
  121. -ms-transform-origin:30px20px;
  122. -o-transform-origin:30px20px;
  123. transform-origin:30px20px;
  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. }
  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. }
  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. }
  149. .thigh{
  150. width:70px;height:145px;
  151. }
  153. .left.thigh{background-image:url(images/me/left-thigh.png);}
  154. .rightright.thigh{background-image:url(images/me/rightright-thigh.png);}
  156. .shin{
  157. top:115px;
  158. width:50px;height:170px;
  159. background-image:url(images/me/shin.png);
  160. -webkit-transform-origin:30px25px;
  161. -moz-transform-origin:30px25px;
  162. -ms-transform-origin:30px25px;
  163. -o-transform-origin:30px25px;
  164. transform-origin:30px25px;
  165. }
  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. }
  182. .foot{
  183. top:155px;left:2px;
  184. width:67px;height:34px;
  185. background-image:url(images/me/foot.png);
  186. -webkit-transform-origin:050%;
  187. -moz-transform-origin:050%;
  188. -ms-transform-origin:050%;
  189. -o-transform-origin:050%;
  190. transform-origin:050%;
  191. }
  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. }
  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. }
  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. }
  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. }
  245. /*settingproperz-indexessothatlimbsshowupcorrectly*/
  247. div.rightright.arm{z-index:1;}
  248. div.left.arm{z-index:-3;}
  249. div.arm>div.bicep>div.forearm{z-index:-1;}
  251. div.rightright.leg{z-index:-1;}
  252. div.left.leg{z-index:-2;}
  253. div.leg>div.thigh>div.shin{z-index:-1;}
  255. .overlay{
  256. width:100%;height:100%;
  257. background:url(images/misc/gradient-left.png)repeat-ytopleft,
  258. url(images/misc/gradient-rightright.png)repeat-ytoprightright;
  259. }
  261. .skydiv{
  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. }
  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. }
  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. }
  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. }
  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. }
  313. .cloud-1{left:0px;}
  314. .cloud-2{left:1200px;}
  316. .cloud-3{left:250px;}
  317. .cloud-4{left:1450px;}
  319. .cloud-5{left:500px;}
  320. .cloud-6{left:1700px;}
  322. .cloud-7{left:950px;}
  323. .cloud-8{left:2150px;}
  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. }
  341. .grounddiv{
  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. }
  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. }
  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. }
  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. }
  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. }

CSS动画相关代码

CSS Code复制内容到剪贴板
  1. @-webkit-keyframesme{
  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. }
  9. @-webkit-keyframesrightright-bicep{
  10. 0%{-webkit-transform:rotate(26deg);}
  11. 50%{-webkit-transform:rotate(-20deg);}
  12. 100%{-webkit-transform:rotate(26deg);}
  13. }
  15. @-webkit-keyframesleft-bicep{
  16. 0%{-webkit-transform:rotate(-20deg);}
  17. 50%{-webkit-transform:rotate(26deg);}
  18. 100%{-webkit-transform:rotate(-20deg);}
  19. }
  21. @-webkit-keyframesrightright-forearm{
  22. 0%{-webkit-transform:rotate(-10deg);}
  23. 50%{-webkit-transform:rotate(-45deg);}
  24. 100%{-webkit-transform:rotate(-10deg);}
  25. }
  27. @-webkit-keyframesleft-forearm{
  28. 0%{-webkit-transform:rotate(-45deg);}
  29. 50%{-webkit-transform:rotate(-10deg);}
  30. 100%{-webkit-transform:rotate(-45deg);}
  31. }
  33. @-webkit-keyframesrightright-thigh{
  34. 0%{-webkit-transform:rotate(-45deg);}
  35. 50%{-webkit-transform:rotate(10deg);}
  36. 100%{-webkit-transform:rotate(-45deg);}
  37. }
  39. @-webkit-keyframesleft-thigh{
  40. 0%{-webkit-transform:rotate(10deg);}
  41. 50%{-webkit-transform:rotate(-45deg);}
  42. 100%{-webkit-transform:rotate(10deg);}
  43. }
  45. @-webkit-keyframesrightright-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. }
  53. @-webkit-keyframesleft-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. }
  61. @-webkit-keyframesrightright-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. }
  69. @-webkit-keyframesleft-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. }
  77. @-webkit-keyframesrightright-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. }
  85. @-webkit-keyframesleft-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. }
  93. @-webkit-keyframesshadow{
  94. 0%{opacity:1;}
  95. 25%{opacity:0.75;}
  96. 50%{opacity:1;}
  97. 75%{opacity:0.75;}
  98. 100%{opacity:1;}
  99. }
  101. @-webkit-keyframesprop-600{
  102. 0%{-webkit-transform:translateX(0px);}
  103. 100%{-webkit-transform:translateX(-600px);}
  104. }
  106. @-webkit-keyframesprop-1200{
  107. 0%{-webkit-transform:translateX(0px);}
  108. 100%{-webkit-transform:translateX(-1200px);}
  109. }
  111. @-webkit-keyframesprop-2000{
  112. 0%{-webkit-transform:translateX(0px);}
  113. 100%{-webkit-transform:translateX(-2000px);}
  114. }

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