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

20. <div class="shadow">div>

21. <div class="me">

22. <div class="torso">

23. <div class="left leg">

24. <div class="left thigh">

25. <div class="left shin">

26. <div class="left foot">

27. <div class="left toes">div>

28. div>

29. div>

30. div>

31. div>

33. <div class="right leg">

34. <div class="right thigh">

35. <div class="right shin">

36. <div class="right foot">

37. <div class="right toes">div>

38. div>

39. div>

40. div>

41. div>

43. <div class="left arm">

44. <div class="left bicep">

45. <div class="left forearm">div>

46. div>

47. div>

49. <div class="right arm">

50. <div class="right bicep">

51. <div class="right forearm">div>

52. div>

53. div>

55. div>

57. div>

59. <div class="overlay">div>

60. 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. #canvas div {

10. position: absolute;

11. -webkit-animation-iteration-count: infinite;

12. -moz-animation-iteration-count: infinite;

13. -ms-animation-iteration-count: infinite;

14. -o-animation-iteration-count: infinite;

15. animation-iteration-count: infinite;

16. -webkit-animation-timing-function: linear;

17. -moz-animation-timing-function: linear;

18. -ms-animation-timing-function: linear;

19. -o-animation-timing-function: linear;

20. animation-timing-function: linear;

21. }

22. #canvas:target div:not(.overlay) {

23. border: 1px solid black;

24. }

25. #canvas:target div.me div{

26. background: rgba(255, 255, 255, 0.25);

27. }

28. .me {

29. top: 50px; left: 350px;

30. -webkit-animation-name: me;

31. -moz-animation-name: me;

32. -ms-animation-name: me;

33. -o-animation-name: me;

34. animation-name: me;

35. }

36. .me, .me div {

37. background-repeat: no-repeat;

38. -webkit-animation-duration: 1750ms;

39. -moz-animation-duration: 1750ms;

40. -ms-animation-duration: 1750ms;

41. -o-animation-duration: 1750ms;

42. animation-duration: 1750ms;

43. }

44. .torso {

45. width: 86px; height: 275px;

46. background-image: url(images/me/torso.png);

47. }

48. .arm {

49. left: 12px;

50. -webkit-transform-origin: 20px 10px;

51. -moz-transform-origin: 20px 10px;

52. -ms-transform-origin: 20px 10px;

53. -o-transform-origin: 20px 10px;

54. transform-origin: 20px 10px;

55. }

56. .rightright.arm {

57. top: 93px;

58. -webkit-animation-name: rightright-bicep;

59. -moz-animation-name: rightright-bicep;

60. -ms-animation-name: rightright-bicep;

61. -o-animation-name: rightright-bicep;

62. animation-name: rightright-bicep;

63. }

64. .left.arm {

65. top: 87px;

66. -webkit-animation-name: left-bicep;

67. -moz-animation-name: left-bicep;

68. -ms-animation-name: left-bicep;

69. -o-animation-name: left-bicep;

70. animation-name: left-bicep;

71. }

72. .bicep {

73. height: 124px; width: 51px;

74. }

75. .rightright.bicep { background-image: url(images/me/rightright-bicep.png); }

76. .left.bicep { background-image: url(images/me/left-bicep.png); }

77. .forearm {

78. top: 108px; left: 14px;

79. width: 36px; height: 121px;

80. -webkit-transform-origin: 3px 7px;

81. -moz-transform-origin: 3px 7px;

82. -ms-transform-origin: 3px 7px;

83. -o-transform-origin: 3px 7px;

84. transform-origin: 3px 7px;

85. }

86. .rightright.forearm {

87. background-image: url(images/me/rightright-forearm.png);

88. -webkit-animation-name: rightright-forearm;

89. -moz-animation-name: rightright-forearm;

90. -ms-animation-name: rightright-forearm;

91. -o-animation-name: rightright-forearm;

92. animation-name: rightright-forearm;

93. }

94. .left.forearm {

95. background-image: url(images/me/left-forearm.png);

96. -webkit-animation-name: left-forearm;

97. -moz-animation-name: left-forearm;

98. -ms-animation-name: left-forearm;

99. -o-animation-name: left-forearm;

100. animation-name: left-forearm;

101. }

102. .leg {

103. left: 6px;

104. -webkit-transform-origin: 30px 20px;

105. -moz-transform-origin: 30px 20px;

106. -ms-transform-origin: 30px 20px;

107. -o-transform-origin: 30px 20px;

108. transform-origin: 30px 20px;

109. -webkit-animation-name: thigh;

110. -moz-animation-name: thigh;

111. -ms-animation-name: thigh;

112. -o-animation-name: thigh;

113. animation-name: thigh;

114. }

115. .rightright.leg {

116. top: 235px;

117. -webkit-animation-name: rightright-thigh;

118. -moz-animation-name: rightright-thigh;

119. -ms-animation-name: rightright-thigh;

120. -o-animation-name: rightright-thigh;

121. animation-name: rightright-thigh;

122. }

123. .left.leg {

124. top: 225px;

125. -webkit-animation-name: left-thigh;

126. -moz-animation-name: left-thigh;

127. -ms-animation-name: left-thigh;

128. -o-animation-name: left-thigh;

129. animation-name: left-thigh;

130. }

131. .thigh {

132. width: 70px; height: 145px;

133. }

134. .left.thigh { background-image: url(images/me/left-thigh.png); }

135. .rightright.thigh { background-image: url(images/me/rightright-thigh.png); }

136. .shin {

137. top: 115px;

138. width: 50px; height: 170px;

139. background-image: url(images/me/shin.png);

140. -webkit-transform-origin: 30px 25px;

141. -moz-transform-origin: 30px 25px;

142. -ms-transform-origin: 30px 25px;

143. -o-transform-origin: 30px 25px;

144. transform-origin: 30px 25px;

145. }

146. .rightright.shin {

147. -webkit-animation-name: rightright-shin;

148. -moz-animation-name: rightright-shin;

149. -ms-animation-name: rightright-shin;

150. -o-animation-name: rightright-shin;

151. animation-name: rightright-shin;

152. }

153. .left.shin {

154. -webkit-animation-name: left-shin;

155. -moz-animation-name: left-shin;

156. -ms-animation-name: left-shin;

157. -o-animation-name: left-shin;

158. animation-name: left-shin;

159. }

160. .foot {

161. top: 155px; left: 2px;

162. width: 67px; height: 34px;

163. background-image: url(images/me/foot.png);

164. -webkit-transform-origin: 0 50%;

165. -moz-transform-origin: 0 50%;

166. -ms-transform-origin: 0 50%;

167. -o-transform-origin: 0 50%;

168. transform-origin: 0 50%;

169. }

170. .rightright.foot {

171. -webkit-animation-name: rightright-foot;

172. -moz-animation-name: rightright-foot;

173. -ms-animation-name: rightright-foot;

174. -o-animation-name: rightright-foot;

175. animation-name: rightright-foot;

176. }

177. .left.foot {

178. -webkit-animation-name: left-foot;

179. -moz-animation-name: left-foot;

180. -ms-animation-name: left-foot;

181. -o-animation-name: left-foot;

182. animation-name: left-foot;

183. }

184. .toes {

185. top: 9px; left: 66px;

186. width: 28px; height: 25px;

187. background-image: url(images/me/toes.png);

188. -webkit-transform-origin: 0% 100%;

189. -moz-transform-origin: 0% 100%;

190. -ms-transform-origin: 0% 100%;

191. -o-transform-origin: 0% 100%;

192. transform-origin: 0% 100%;

193. }

194. .rightright.toes {

195. -webkit-animation-name: rightright-toes;

196. -moz-animation-name: rightright-toes;

197. -ms-animation-name: rightright-toes;

198. -o-animation-name: rightright-toes;

199. animation-name: rightright-toes;

200. }

201. .left.toes {

202. -webkit-animation-name: left-toes;

203. -moz-animation-name: left-toes;

204. -ms-animation-name: left-toes;

205. -o-animation-name: left-toes;

206. animation-name: left-toes;

207. }

208. .shadow {

209. width: 200px; height: 70px;

210. left: 270px; bottombottom: 5px;

211. background-image: url(images/misc/shadow.png);

212. -webkit-animation-name: shadow;

213. -moz-animation-name: shadow;

214. -ms-animation-name: shadow;

215. -o-animation-name: shadow;

216. animation-name: shadow;

217. }

218. /* setting proper z-indexes so that limbs show up correctly */

219. div.rightright.arm { z-index: 1; }

220. div.left.arm { z-index: -3; }

221. div.arm > div.bicep > div.forearm { z-index: -1; }

222. div.rightright.leg { z-index: -1; }

223. div.left.leg { z-index: -2; }

224. div.leg > div.thigh > div.shin { z-index: -1; }

225. .overlay {

226. width: 100%; height: 100%;

227. background: url(images/misc/gradient-left.png) repeat-y top left,

228. url(images/misc/gradient-rightright.png) repeat-y top rightright;

229. }

230. .sky div {

231. background-repeat: no-repeat;

232. -webkit-animation-name: prop-1200;

233. -moz-animation-name: prop-1200;

234. -ms-animation-name: prop-1200;

235. -o-animation-name: prop-1200;

236. animation-name: prop-1200;

237. }

238. .cloud-1, .cloud-2 {

239. width: 82px; height: 90px;

240. background-image: url(images/clouds/1.png);

241. -webkit-animation-duration: 120s;

242. -moz-animation-duration: 120s;

243. -ms-animation-duration: 120s;

244. -o-animation-duration: 120s;

245. animation-duration: 120s;

246. }

247. .cloud-3, .cloud-4 {

248. top: 70px;

249. width: 159px; height: 90px;

250. background-image: url(images/clouds/2.png);

251. -webkit-animation-duration: 80s;

252. -moz-animation-duration: 80s;

253. -ms-animation-duration: 80s;

254. -o-animation-duration: 80s;

255. animation-duration: 80s;

256. }

257. .cloud-5, .cloud-6 {

258. top: 30px;

259. width: 287px; height: 62px;

260. background-image: url(images/clouds/3.png);

261. -webkit-animation-duration: 140s;

262. -moz-animation-duration: 140s;

263. -ms-animation-duration: 140s;

264. -o-animation-duration: 140s;

265. animation-duration: 140s;

266. }

267. .cloud-7, .cloud-8 {

268. top: 100px;

269. width: 94px; height: 81px;

270. background-image: url(images/clouds/4.png);

271. -webkit-animation-duration: 90s;

272. -moz-animation-duration: 90s;

273. -ms-animation-duration: 90s;

274. -o-animation-duration: 90s;

275. animation-duration: 90s;

276. }

277. .cloud-1 { left: 0px; }

278. .cloud-2 { left: 1200px; }

279. .cloud-3 { left: 250px; }

280. .cloud-4 { left: 1450px; }

281. .cloud-5 { left: 500px; }

282. .cloud-6 { left: 1700px; }

283. .cloud-7 { left: 950px; }

284. .cloud-8 { left: 2150px; }

285. .horizon {

286. top: 350px;

287. width: 1800px; height: 50px;

288. background: url(images/misc/horizon.png) repeat-x;

289. -webkit-animation-name: prop-600;

290. -moz-animation-name: prop-600;

291. -ms-animation-name: prop-600;

292. -o-animation-name: prop-600;

293. animation-name: prop-600;

294. -webkit-animation-duration: 40s;

295. -moz-animation-duration: 40s;

296. -ms-animation-duration: 40s;

297. -o-animation-duration: 40s;

298. animation-duration: 40s;

299. }

300. .ground div {

301. background-repeat: no-repeat;

302. -webkit-animation-name: prop-2000;

303. -moz-animation-name: prop-2000;

304. -ms-animation-name: prop-2000;

305. -o-animation-name: prop-2000;

306. animation-name: prop-2000;

307. }

308. .sign-all-css {

309. width: 160px; height: 188px;

310. top: 325px; left: 1600px;

311. background-image: url(images/signs/all-css.png);

312. -webkit-animation-duration: 35s;

313. -moz-animation-duration: 35s;

314. -ms-animation-duration: 35s;

315. -o-animation-duration: 35s;

316. animation-duration: 35s;

317. }

318. .sign-lots-of-divs {

319. width: 102px; height: 120px;

320. top: 345px; left: 1150px;

321. background-image: url(images/signs/lots-of-divs.png);

322. -webkit-animation-duration: 56s;

323. -moz-animation-duration: 56s;

324. -ms-animation-duration: 56s;

325. -o-animation-duration: 56s;

326. animation-duration: 56s;

327. }

328. .sign-no-js {

329. width: 65px; height: 77px;

330. top: 348px; left: 1150px;

331. background-image: url(images/signs/no-js.png);

332. -webkit-animation-duration: 71s;

333. -moz-animation-duration: 71s;

334. -ms-animation-duration: 71s;

335. -o-animation-duration: 71s;

336. animation-duration: 71s;

337. }

338. .sign-best {

339. width: 43px; height: 50px;

340. top: 350px; left: 1000px;

341. background-image: url(images/signs/best.png);

342. -webkit-animation-duration: 95s;

343. -moz-animation-duration: 95s;

344. -ms-animation-duration: 95s;

345. -o-animation-duration: 95s;

346. animation-duration: 95s;

347. }

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. @-webkit-keyframes rightright-bicep {

9. 0% { -webkit-transform: rotate(26deg); }

10. 50% { -webkit-transform: rotate(-20deg); }

11. 100% { -webkit-transform: rotate(26deg); }

12. }

13. @-webkit-keyframes left-bicep {

14. 0% { -webkit-transform: rotate(-20deg); }

15. 50% { -webkit-transform: rotate(26deg); }

16. 100% { -webkit-transform: rotate(-20deg); }

17. }

18. @-webkit-keyframes rightright-forearm {

19. 0% { -webkit-transform: rotate(-10deg); }

20. 50% { -webkit-transform: rotate(-45deg); }

21. 100% { -webkit-transform: rotate(-10deg); }

22. }

23. @-webkit-keyframes left-forearm {

24. 0% { -webkit-transform: rotate(-45deg); }

25. 50% { -webkit-transform: rotate(-10deg); }

26. 100% { -webkit-transform: rotate(-45deg); }

27. }

28. @-webkit-keyframes rightright-thigh {

29. 0% { -webkit-transform: rotate(-45deg); }

30. 50% { -webkit-transform: rotate(10deg); }

31. 100% { -webkit-transform: rotate(-45deg); }

32. }

33. @-webkit-keyframes left-thigh {

34. 0% { -webkit-transform: rotate(10deg); }

35. 50% { -webkit-transform: rotate(-45deg); }

36. 100% { -webkit-transform: rotate(10deg); }

37. }

38. @-webkit-keyframes rightright-shin {

39. 0% { -webkit-transform: rotate(30deg); }

40. 25% { -webkit-transform: rotate(20deg); }

41. 50% { -webkit-transform: rotate(20deg); }

42. 75% { -webkit-transform: rotate(85deg); }

43. 100% { -webkit-transform: rotate(30deg); }

44. }

45. @-webkit-keyframes left-shin {

46. 0% { -webkit-transform: rotate(20deg); }

47. 25% { -webkit-transform: rotate(85deg); }

48. 50% { -webkit-transform: rotate(30deg); }

49. 75% { -webkit-transform: rotate(20deg); }

50. 100% { -webkit-transform: rotate(20deg); }

51. }

52. @-webkit-keyframes rightright-foot {

53. 0% { -webkit-transform: rotate(-5deg); }

54. 25% { -webkit-transform: rotate(-7deg); }

55. 50% { -webkit-transform: rotate(-16deg); }

56. 75% { -webkit-transform: rotate(-10deg); }

57. 100% { -webkit-transform: rotate(-5deg); }

58. }

59. @-webkit-keyframes left-foot {

60. 0% { -webkit-transform: rotate(-16deg); }

61. 25% { -webkit-transform: rotate(-10deg); }

62. 50% { -webkit-transform: rotate(-5deg); }

63. 75% { -webkit-transform: rotate(-7deg); }

64. 100% { -webkit-transform: rotate(-16deg); }

65. }

66. @-webkit-keyframes rightright-toes {

67. 0% { -webkit-transform: rotate(0deg); }

68. 25% { -webkit-transform: rotate(-10deg); }

69. 50% { -webkit-transform: rotate(-10deg); }

70. 75% { -webkit-transform: rotate(-25deg); }

71. 100% { -webkit-transform: rotate(0deg); }

72. }

73. @-webkit-keyframes left-toes {

74. 0% { -webkit-transform: rotate(-10deg); }

75. 25% { -webkit-transform: rotate(-25deg); }

76. 50% { -webkit-transform: rotate(0deg); }

77. 75% { -webkit-transform: rotate(-10deg); }

78. 100% { -webkit-transform: rotate(-10deg); }

79. }

80. @-webkit-keyframes shadow {

81. 0% { opacity: 1; }

82. 25% { opacity: 0.75; }

83. 50% { opacity: 1; }

84. 75% { opacity: 0.75; }

85. 100% { opacity: 1; }

86. }

87. @-webkit-keyframes prop-600 {

88. 0% { -webkit-transform: translateX(0px); }

89. 100% { -webkit-transform: translateX(-600px); }

90. }

91. @-webkit-keyframes prop-1200 {

92. 0% { -webkit-transform: translateX(0px); }

93. 100% { -webkit-transform: translateX(-1200px); }

94. }

95. @-webkit-keyframes prop-2000 {

96. 0% { -webkit-transform: translateX(0px); }

97. 100% { -webkit-transform: translateX(-2000px); }

98. }

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