利用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. }   

“利用CSS3实现人物行走动画实例代码”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！