基于HTML5的齿轮动画特效_html5教程技巧-H5教程

HTML代码

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

1. <p id="level">
2. <p id="content">
3. <p id="gears">
4. <p id="gears-static"></p>
5. <p id="gear-system-1">
6. <p class="shadow" id="shadow15"></p>
7. <p id="gear15"></p>
8. <p class="shadow" id="shadow14"></p>
9. <p id="gear14"></p>
10. <p class="shadow" id="shadow13"></p>
11. <p id="gear13"></p>
12. </p>
13. <p id="gear-system-2">
14. <p class="shadow" id="shadow10"></p>
15. <p id="gear10"></p>
16. <p class="shadow" id="shadow3"></p>
17. <p id="gear3"></p>
18. </p>
19. <p id="gear-system-3">
20. <p class="shadow" id="shadow9"></p>
21. <p id="gear9"></p>
22. <p class="shadow" id="shadow7"></p>
23. <p id="gear7"></p>
24. </p>
25. <p id="gear-system-4">
26. <p class="shadow" id="shadow6"></p>
27. <p id="gear6"></p>
28. <p id="gear4"></p>
29. </p>
30. <p id="gear-system-5">
31. <p class="shadow" id="shadow12"></p>
32. <p id="gear12"></p>
33. <p class="shadow" id="shadow11"></p>
34. <p id="gear11"></p>
35. <p class="shadow" id="shadow8"></p>
36. <p id="gear8"></p>
37. </p>
38. <p class="shadow" id="shadow1"></p>
39. <p id="gear1"></p>
40. <p id="gear-system-6">
41. <p class="shadow" id="shadow5"></p>
42. <p id="gear5"></p>
43. <p id="gear2"></p>
44. </p>
45. <p class="shadow" id="shadowweight"></p>
46. <p id="chain-circle"></p>
47. <p id="chain"></p>
48. <p id="weight"></p>
49. </p>
50. </p>
51. </p>

CSS代码

CSS Code复制内容到剪贴板

1. #level{
2. width:100%;
3. height:1px;
4. position:absolute;
5. top:50%;
6. }
7. #content{
8. text-align:center;
9. margin-top:-327px;
10. }
11. #gears{
12. width:478px;
13. height:655px;
14. position:relative;
15. display:inline-block;
16. vertical-align:middle;
17. }
18. #gears-static{
19. background:url(FgFnjks.png) no-repeat -363px -903px;
20. width:329px;
21. height:602px;
22. position:absolute;
23. bottombottom:5px;
24. rightright:0px;
25. opacity:0.4;
26. }
27. #title{
28. vertical-align:middle;
29. color:#9EB7B5;
30. width:43%;
31. display:inline-block;
32. }
33. #title h1{
34. font-family: 'PTSansNarrowBold', sans-serif;
35. font-size:3.6em;
36. text-shadow:rgba(0, 0, 0, 0.36) 7px 7px 10px;
37. }
38. #title p{
39. font-family: sans-serif;
40. font-size:1.2em;
41. line-height:148%;
42. text-shadow:rgba(0, 0, 0, 0.36) 1px 1px 0px;
43. }
45. .shadow{
46. -webkit-box-shadow: 4px 7px 25px 10px rgba(43, 36, 0, 0.36);
47. -moz-box-shadow: 4px 7px 25px 10px rgba(43, 36, 0, 0.36);
48. box-shadow: 4px 7px 25px 10px rgba(43, 36, 0, 0.36);
49. }
51. /*gear-system-1*/
52. #gear15{
53. background: url(FgFnjks.png) no-repeat 0 -993px;
54. width: 321px;
55. height: 321px;
56. position:absolute;
57. left:45px;
58. top:179px;
60. -webkit-animation: rotate-back 24000ms linear infinite;
61. -moz-animation: rotate-back 24000ms linear infinite;
62. -ms-animation: rotate-back 24000ms linear infinite;
63. animation: rotate-back 24000ms linear infinite;
64. }
65. #shadow15{
66. width:306px;
67. height:306px;
68. -webkit-border-radius:153px;
69. -moz-border-radius:153px;
70. border-radius:153px;
71. position:absolute;
72. left:52px;
73. top:186px;
74. }
75. #gear14{
76. background: url(FgFnjks.png) no-repeat 0 -856px;
77. width: 87px;
78. height: 87px;
79. position:absolute;
80. left:162px;
81. top:296px;
82. }
83. #shadow14{
84. width:70px;
85. height:70px;
86. -webkit-border-radius:35px;
87. -moz-border-radius:35px;
88. border-radius:35px;
89. position:absolute;
90. left:171px;
91. top:304px;
92. }
93. #gear13{
94. background: url(FgFnjks.png) no-repeat 0 -744px;
95. width: 62px;
96. height: 62px;
97. position:absolute;
98. left:174px;
99. top:309px;
101. -webkit-animation: rotate 8000ms linear infinite;
102. -moz-animation: rotate 8000ms linear infinite;
103. -ms-animation: rotate 8000ms linear infinite;
104. animation: rotate 8000ms linear infinite;
105. }
106. #shadow13{
107. width:36px;
108. height:36px;
109. -webkit-border-radius:18px;
110. -moz-border-radius:18px;
111. border-radius:18px;
112. position:absolute;
113. left:187px;
114. top:322px;
115. }
117. /*gear-system-2*/
118. #gear10{
119. background: url(FgFnjks.png) no-repeat 0 -184px;
120. width: 122px;
121. height: 122px;
122. position:absolute;
123. left:175px;
124. top:0;
126. -webkit-animation: rotate-back 8000ms linear infinite;
127. -moz-animation: rotate-back 8000ms linear infinite;
128. -ms-animation: rotate-back 8000ms linear infinite;
129. animation: rotate-back 8000ms linear infinite;
130. }
131. #shadow10{
132. width:86px;
133. height:86px;
134. -webkit-border-radius:43px;
135. -moz-border-radius:43px;
136. border-radius:43px;
137. position:absolute;
138. left:193px;
139. top:18px;
140. }
141. #gear3{
142. background: url(FgFnjks.png) no-repeat 0 -1493px;
143. width: 85px;
144. height: 84px;
145. position:absolute;
146. left:194px;
147. top:19px;
149. -webkit-animation: rotate 10000ms linear infinite;
150. -moz-animation: rotate 10000ms linear infinite;
151. -ms-animation: rotate 10000ms linear infinite;
152. animation: rotate 10000ms linear infinite;
153. }
154. #shadow3{
155. width:60px;
156. height:60px;
157. -webkit-border-radius:30px;
158. -moz-border-radius:30px;
159. border-radius:30px;
160. position:absolute;
161. left:206px;
162. top:31px;
163. }
165. /*gear-system-3*/
166. #gear9{
167. background: url(FgFnjks.png) no-repeat -371px -280px;
168. width: 234px;
169. height: 234px;
170. position:absolute;
171. left:197px;
172. top:96px;
174. -webkit-animation: rotate 12000ms linear infinite;
175. -moz-animation: rotate 12000ms linear infinite;
176. -ms-animation: rotate 12000ms linear infinite;
177. animation: rotate 12000ms linear infinite;
178. }
179. #shadow9{
180. width:200px;
181. height:200px;
182. -webkit-border-radius:100px;
183. -moz-border-radius:100px;
184. border-radius:100px;
185. position:absolute;
186. left:214px;
187. top:113px;
188. }
189. #gear7{
190. background: url(FgFnjks.png) no-repeat -371px 0;
191. width: 108px;
192. height: 108px;
193. position:absolute;
194. left:260px;
195. top:159px;
197. -webkit-animation: rotate-back 10000ms linear infinite;
198. -moz-animation: rotate-back 10000ms linear infinite;
199. -ms-animation: rotate-back 10000ms linear infinite;
200. animation: rotate-back 10000ms linear infinite;
201. }
202. #shadow7{
203. width:76px;
204. height:76px;
205. -webkit-border-radius:38px;
206. -moz-border-radius: 38px;
207. border-radius: 38px;
208. position:absolute;
209. left:276px;
210. top:175px;
211. }
213. /*gear-system-4*/
214. #gear6{
215. background: url(FgFnjks.png) no-repeat 0 -1931px;
216. width: 134px;
217. height: 134px;
218. position:absolute;
219. left:305px;
220. bottombottom:212px;
222. -webkit-animation: rotate-back 10000ms linear infinite;
223. -moz-animation: rotate-back 10000ms linear infinite;
224. -ms-animation: rotate-back 10000ms linear infinite;
225. animation: rotate-back 10000ms linear infinite;
226. }
227. #shadow6{
228. width:98px;
229. height:98px;
230. -webkit-border-radius:49px;
231. -moz-border-radius: 49px;
232. border-radius: 49px;
233. position:absolute;
234. left:323px;
235. bottombottom:230px;
236. }
237. #gear4{
238. background: url(FgFnjks.png) no-repeat 0 -1627px;
239. width: 69px;
240. height: 69px;
241. position:absolute;
242. left:337px;
243. bottombottom:245px;
245. -webkit-animation: rotate-back 10000ms linear infinite;
246. -moz-animation: rotate-back 10000ms linear infinite;
247. -ms-animation: rotate-back 10000ms linear infinite;
248. animation: rotate-back 10000ms linear infinite;
249. }
251. /*gear-system-5*/
252. #gear12{
253. background: url(FgFnjks.png) no-repeat 0 -530px;
254. width: 164px;
255. height: 164px;
256. position:absolute;
257. left:208px;
258. bottombottom:85px;
260. -webkit-animation: rotate 8000ms linear infinite;
261. -moz-animation: rotate 8000ms linear infinite;
262. -ms-animation: rotate 8000ms linear infinite;
263. animation: rotate 8000ms linear infinite;
264. }
265. #shadow12{
266. width:124px;
267. height:124px;
268. -webkit-border-radius:62px;
269. -moz-border-radius:62px;
270. border-radius:62px;
271. position:absolute;
272. left:225px;
273. bottombottom:107px;
274. }
275. #gear11{
276. background: url(FgFnjks.png) no-repeat 0 -356px;
277. width: 125px;
278. height: 124px;
279. position:absolute;
280. left:228px;
281. bottombottom:105px;
283. -webkit-animation: rotate-back 10000ms linear infinite;
284. -moz-animation: rotate-back 10000ms linear infinite;
285. -ms-animation: rotate-back 10000ms linear infinite;
286. animation: rotate-back 10000ms linear infinite;
287. }
288. #shadow11{
289. width:88px;
290. height:88px;
291. -webkit-border-radius:44px;
292. -moz-border-radius:44px;
293. border-radius:44px;
294. position:absolute;
295. left:247px;
296. bottombottom:123px;
297. }
298. #gear8{
299. background: url(FgFnjks.png) no-repeat -371px -158px;
300. width: 72px;
301. height: 72px;
302. position:absolute;
303. left:254px;
304. bottombottom:131px;
306. -webkit-animation: rotate 6000ms linear infinite;
307. -moz-animation: rotate 6000ms linear infinite;
308. -ms-animation: rotate 6000ms linear infinite;
309. animation: rotate 6000ms linear infinite;
310. }
311. #shadow8{
312. width:42px;
313. height:42px;
314. -webkit-border-radius:21px;
315. -moz-border-radius: 21px;
316. border-radius: 21px;
317. position:absolute;
318. left:269px;
319. bottombottom:146px;
320. }
322. /*gear1*/
323. #gear1{
324. background: url(FgFnjks.png) no-repeat 0 0;
325. width: 135px;
326. height: 134px;
327. position:absolute;
328. left:83px;
329. bottombottom:111px;
331. -webkit-animation: rotate-back 10000ms linear infinite;
332. -moz-animation: rotate-back 10000ms linear infinite;
333. -ms-animation: rotate-back 10000ms linear infinite;
334. animation: rotate-back 10000ms linear infinite;
335. }
336. #shadow1{
337. width:96px;
338. height:96px;
339. -webkit-border-radius:48px;
340. -moz-border-radius:48px;
341. border-radius:48px;