Effets spéciaux d'animation d'engrenage basés sur les compétences du didacticiel HTML5_html5

Il s'agit d'un effet spécial d'animation d'engrenage basé sur HTML5. Nous convertissons les principes physiques de la rotation des engrenages en code HTML5 et implémentons l'effet d'animation de la rotation des engrenages simulée sur la page Web. La plus grande caractéristique de cette animation d'engrenage est qu'elle est composée de plusieurs engrenages, ce qui augmente considérablement les exigences de l'algorithme pour la transmission des engrenages. De plus, nous n'avons pas utilisé JavaScript, mais du CSS3 pur pour l'implémenter.

Code HTML

Code XML/HTMLCopier le contenu dans le presse-papiers

1. <div id="niveau" >  
2.  <div id="contenu" >  
3.   <div id="engrenages" >  
4.    <div id="engrenages- statique">div>  
5.    <div id="gear- système-1">  
6.     <div classe="ombre"  id="shadow15">div>  
7.     <div id="gear15" >div>  
8.     <div class="ombre"  id="shadow14">div>  
9.     <div id="gear14" >div>  
10.     <div class="ombre"  id="shadow13">div>  
11.     <div id="gear13" >div>  
12.    div>  
13.    <div id="gear- système-2">  
14.     <div class="ombre"  id="shadow10">div>  
15.     <div id="gear10" >div>  
16.     <div class="ombre"  id="shadow3">div>  
17.     <div id="gear3" >div>  
18.    div>  
19.    <div id="gear- système-3">  
20.     <div class="ombre"  id="shadow9">div>  
21.     <div id="gear9" >div>  
22.     <div class="ombre"  id="shadow7">div>  
23.     <div id="gear7" >div>  
24.    div>  
25.    <div id="gear- système-4">  
26.     <div class="ombre"  id="shadow6">div>  
27.     <div id="gear6" >div>  
28.     <div id="gear4" >div>  
29.    div>  
30.    <div id="gear- système-5">  
31.     <div class="ombre"  id="shadow12">div>  
32.     <div id="gear12" >div>  
33.     <div class="ombre"  id="shadow11">div>  
34.     <div id="gear11" >div>  
35.     <div class="ombre"  id="shadow8">div>  
36.     <div id="gear8" >div>  
37.    div>  
38.    <div classe="ombre"  id="shadow1">div>  
39.    <div id="gear1" >div>  
40.    <div id="gear- système-6">  
41.     <div class="ombre"  id="shadow5">div>  
42.     <div id="gear5" >div>  
43.     <div id="gear2" >div>  
44.    div>  
45.    <div class="ombre"  id="shadowweight">div>  
46.    <div id="chaîne- cercle">div>  
47.    <div id="chaîne" >div>  
48.    <div id="poids" >div>  
49.   div>  
50.  div>  
51. div>  

Code CSS

Code CSSCopier le contenu dans le presse-papiers

1. #niveau{   
2.  largeur : 100 % ;   
3.  hauteur :1px ;   
4.  position :absolue ;   
5.  haut :50 % ;   
6. }   
7. #content{   
8.  alignement du texte :centre ;   
9.  marge supérieure :-327px ;   
10. }   
11. #engrenages{   
12.  largeur :478px ;   
13.  hauteur :655px ;   
14.  position :relative ;   
15.  affichage :en ligne-bloc ;   
16.  alignement vertical :milieu ;   
17. }   
18. #engrenages-statique{   
19.  arrière-plan :url(FgFnjks.png) pas de répétition  -363px -903px ;   
20.  largeur :329px ;   
21.  hauteur :602px ;   
22.  position :absolue ;   
23.  basbas :5px ;   
24.  droitedroite :0px ;   
25.  opacité : 0,4 ;   
26. }   
27. #titre{   
28.  alignement vertical :milieu ;   
29.  couleur :#9EB7B5;   
30.  largeur :43 % ;   
31.  affichage :en ligne-bloc ;   
32. }  
33. #titre h1{   
34.  font-family : 'PTSansNarrowBold', sans-serif ;   
35.  taille de police : 3,6 em ;   
36.  text-shadow:rgba(0, 0, 0, 0.36) 7px 7px 10px;   
37. }   
38. #titre p{   
39.  font-family : sans-serif;   
40.  taille de police : 1,2 em ;   
41.  hauteur de la ligne : 148 % ;   
42.  text-shadow:rgba(0, 0, 0, 0.36) 1px 1px 0px;   
43. }   
44.   
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. }   
50.   
51. /*gear-system-1*/  
52. #gear15{   
53.  arrière-plan : url(FgFnjks.png) pas de répétition  0 -993px ;   
54.  largeur : 321px ;   
55.  hauteur : 321px ;   
56.  position :absolue ;   
57.  gauche :45px ;   
58.  haut :179px ;   
59.   
60.  -webkit-animation : rotation arrière 24 000 ms linéaire infini ;   
61.  -moz-animation : rotation arrière 24 000 ms linéaire infinie ;   
62.  -ms-animation : rotation arrière 24 000 ms linéaire infini ;   
63.  animation : rotation arrière 24 000 ms linéaire infinie ;   
64. }  
65. #ombre15{   
66.  largeur :306px ;   
67.  hauteur :306px ;   
68.  -webkit-bordure-radius :153px;   
69.  -moz-bordure-radius :153px;   
70.  bordure-rayon :153px ;   
71.  position :absolue ;   
72.  gauche :52px ;   
73.  haut :186px ;   
74. }   
75. #gear14{   
76.  arrière-plan : url(FgFnjks.png) pas de répétition  0 -856px ;   
77.  largeur : 87px ;   
78.  hauteur : 87px ;   
79.  position :absolue ;   
80.  gauche :162px ;   
81.  haut :296px ;   
82. }   
83. #ombre14{   
84.  largeur :70px ;   
85.  hauteur :70px ;   
86.  -webkit-bordure-radius :35px;   
87.  -moz-bordure-radius :35px;   
88.  bordure-rayon :35px;   
89.  position :absolue ;   
90.  gauche :171px ;   
91.  haut :304px ;   
92. }  
93. #gear13{   
94.  arrière-plan : url(FgFnjks.png) pas de répétition  0 -744px ;   
95.  largeur : 62px ;   
96.  hauteur : 62px ;   
97.  position :absolue ;   
98.  gauche :174px ;   
99.  haut :309px ;   
100.   
101.  -webkit-animation : rotation de 8 000 ms linéaire infini ;   
102.  -moz-animation : rotation de 8 000 ms linéaire infini ;   
103.  -ms-animation : rotation de 8 000 ms linéaire infini ;   
104.  animation : rotation de 8 000 ms linéaire infini ;   
105. }   
106. #ombre13{   
107.  largeur :36px ;   
108.  hauteur :36px ;   
109.  -webkit-bordure-radius :18px;   
110.  -moz-bordure-radius :18px;   
111.  bordure-rayon :18px;   
112.  position :absolue ;   
113.  gauche :187px ;   
114.  haut :322px ;   
115. }   
116.   
117. /*gear-system-2*/  
118. #gear10{   
119.  arrière-plan : url(FgFnjks.png) pas de répétition  0 -184px;   
120.  largeur : 122px ;   
121.  hauteur : 122px ;   
122.  position :absolue ;   
123.  gauche :175px ;   
124.  haut :0 ;   
125.   
126.  -webkit-animation : rotation arrière 8 000 ms linéaire infinie ;   
127.  -moz-animation : rotation arrière 8 000 ms linéaire infinie ;   
128.  -ms-animation : rotation arrière 8 000 ms linéaire infinie ;   
129.  animation : rotation arrière 8 000 ms linéaire infinie ;   
130. }  
131. #ombre10{   
132.  largeur :86px ;   
133.  hauteur :86px ;   
134.  -webkit-bordure-radius :43px;   
135.  -moz-bordure-radius :43px;   
136.  bordure-rayon :43px;   
137.  position :absolue ;   
138.  gauche :193px ;   
139.  haut :18px ;   
140. }   
141. #gear3{   
142.  arrière-plan : url(FgFnjks.png) pas de répétition  0 -1493px;   
143.  largeur : 85px ;   
144.  hauteur : 84px ;   
145.  position :absolue ;   
146.  gauche :194px ;   
147.  haut :19px ;   
148.   
149.  -webkit-animation : rotation de 10 000 ms linéaire infini ;   
150.  -moz-animation : rotation de 10 000 ms linéaire infini ;   
151.  -ms-animation : rotation de 10 000 ms linéaire infini ;   
152.  animation : rotation de 10 000 ms linéaire infini ;   
153. }   
154. #ombre3{   
155.  largeur :60px ;   
156.  hauteur :60px ;   
157.  -webkit-bordure-radius :30px;   
158.  -moz-bordure-radius :30px;   
159.  bordure-rayon :30px;   
160.  position :absolue ;   
161.  gauche :206px ;   
162.  haut :31px ;   
163. }  
164.   
165. /*gear-system-3*/  
166. #gear9{   
167.  arrière-plan : url(FgFnjks.png) pas de répétition  -371px -280px;   
168.  largeur : 234px ;   
169.  hauteur : 234px ;   
170.  position :absolue ;   
171.  gauche :197px ;   
172.  haut :96px ;   
173.   
174.  -webkit-animation : rotation 12 000 ms linéaire infini ;   
175.  -moz-animation : rotation 12 000 ms linéaire infini ;   
176.  -ms-animation : rotation 12 000 ms linéaire infini ;   
177.  animation : rotation 12 000 ms linéaire infini ;   
178. }   
179. #ombre9{   
180.  largeur :200px ;   
181.  hauteur :200px ;   
182.  -webkit-bordure-radius :100px;   
183.  -moz-bordure-radius :100px;   
184.  bordure-rayon :100px;   
185.  position :absolue ;   
186.  gauche :214px ;   
187.  haut :113px ;   
188. }   
189. #gear7{   
190.  arrière-plan : url(FgFnjks.png) pas de répétition  -371px 0 ;   
191.  largeur : 108px ;   
192.  hauteur : 108px ;   
193.  position :absolue ;   
194.  gauche :260px ;   
195.  haut :159px ;   
196.   
197.  -webkit-animation : rotation arrière 10 000 ms linéaire infinie ;   
198.  -moz-animation : rotation arrière 10 000 ms linéaire infinie ;   
199.  -ms-animation : rotation arrière 10 000 ms linéaire infini ;   
200.  animation : rotation arrière 10 000 ms linéaire infinie ;   
201. }  
202. #ombre7{   
203.  largeur :76px ;   
204.  hauteur :76px ;   
205.  -webkit-bordure-radius :38px;   
206.  -moz-bordure-radius : 38px ;   
207.  bordure-rayon : 38px ;   
208.  position :absolue ;   
209.  gauche :276px ;   
210.  haut :175px ;   
211. }   
212.   
213. /*gear-system-4*/  
214. #gear6{   
215.  arrière-plan : url(FgFnjks.png) pas de répétition  0 -1931px;   
216.  largeur : 134px ;   
217.  hauteur : 134px ;   
218.  position :absolue ;   
219.  gauche :305px ;   
220.  basbas :212px ;   
221.   
222.  -webkit-animation : rotation arrière 10 000 ms linéaire infinie ;   
223.  -moz-animation : rotation arrière 10 000 ms linéaire infinie ;   
224.  -ms-animation : rotation arrière 10 000 ms linéaire infini ;   
225.  animation : rotation arrière 10 000 ms linéaire infinie ;   
226. }   
227. #ombre6{   
228.  largeur :98px ;   
229.  hauteur :98px ;   
230.  -webkit-bordure-radius :49px;   
231.  -moz-bordure-rayon : 49px;   
232.  bordure-rayon : 49px ;   
233.  position :absolue ;   
234.  gauche :323px ;   
235.  basbas :230px ;   
236. }  
237. #gear4{   
238.  arrière-plan : url(FgFnjks.png) pas de répétition  0 -1627px ;   
239.  largeur : 69px ;   
240.  hauteur : 69px ;   
241.  position :absolue ;   
242.  gauche :337px ;   
243.  basbas :245px ;   
244.   
245.  -webkit-animation : rotation arrière 10 000 ms linéaire infinie ;   
246.  -moz-animation : rotation arrière 10 000 ms linéaire infinie ;   
247.  -ms-animation : rotation arrière 10 000 ms linéaire infini ;   
248.  animation : rotation arrière 10 000 ms linéaire infinie ;   
249. }   
250.   
251. /*gear-system-5*/  
252. #gear12{   
253.  arrière-plan : url(FgFnjks.png) pas de répétition  0 -530px ;   
254.  largeur : 164px ;   
255.  hauteur : 164px ;   
256.  position :absolue ;   
257.  gauche :208px ;   
258.  basbas :85px ;   
259.   
260.  -webkit-animation : rotation de 8 000 ms linéaire infini ;   
261.  -moz-animation : rotation de 8 000 ms linéaire infini ;   
262.  -ms-animation : rotation de 8 000 ms linéaire infini ;   
263.  animation : rotation de 8 000 ms linéaire infini ;   
264. }  
265. #ombre12{   
266.  largeur :124px ;   
267.  hauteur :124px ;   
268.  -webkit-bordure-radius :62px;   
269.  -moz-bordure-radius :62px;   
270.  bordure-rayon :62px ;   
271.  position :absolue ;   
272.  gauche :225px ;   
273.  basbas :107px ;   
274. }   
275. #gear11{   
276.  arrière-plan : url(FgFnjks.png) pas de répétition  0 -356px ;   
277.  largeur : 125px ;   
278.  hauteur : 124px ;   
279.  position :absolue ;   
280.  gauche :228px ;   
281.  basbas :105px ;   
282.   
283.  -webkit-animation : rotation arrière 10 000 ms linéaire infinie ;   
284.  -moz-animation : rotation arrière 10 000 ms linéaire infinie ;   
285.  -ms-animation : rotation arrière 10 000 ms linéaire infini ;   
286.  animation : rotation arrière 10 000 ms linéaire infinie ;   
287. }   
288. #ombre11{   
289.  largeur :88px ;   
290.  hauteur :88px ;   
291.  -webkit-bordure-radius :44px;   
292.  -moz-bordure-radius :44px;   
293.  bordure-rayon :44px;   
294.  position :absolue ;   
295.  gauche :247px ;   
296.  basbas :123px ;   
297. }  
298. #gear8{   
299.  arrière-plan : url(FgFnjks.png) pas de répétition  -371px -158px ;   
300.  largeur : 72px ;   
301.  hauteur : 72px ;   
302.  position :absolue ;   
303.  gauche :254px ;   
304.  basbas :131px ;   
305.   
306.  -webkit-animation : rotation 6000 ms linéaire infinie ;   
307.  -moz-animation : rotation 6000 ms linéaire infinie ;   
308.  -ms-animation : rotation 6 000 ms linéaire infini ;   
309.  animation : rotation 6 000 ms linéaire infinie ;   
310. }   
311. #ombre8{   
312.  largeur :42px ;   
313.  hauteur :42px ;   
314.  -webkit-bordure-radius :21px;   
315.  -moz-bordure-rayon : 21px;   
316.  bordure-rayon : 21px ;   
317.  position :absolue ;   
318.  gauche :269px ;   
319.  basbas :146px ;   
320. }  
321.   
322. /*齒輪1*/  
323. #gear1{   
324.  背景: url(FgFnjks.png) 🎜> 0 0;     
325. 寬度: 135px;    ;   
326.  高度: 134px;   
327. ;     位置：絕對
328. ；     左:83px
329. ;     底部底部:
111px
330. ;  
  
-webkit-animation：向後旋轉 10000ms 線性無限；   
-moz-animation：向後旋轉 10000ms 線性無限；   
 -ms-animation：向後旋轉 10000ms 線性無限；   
 動畫：向後旋轉 10000ms 線性無限；   
}   
336. #shadow
1{   
337.  寬度:96px
;   
338.  高度:96px
339. ;     -webkit-邊框-半徑：
48px
340. ； 🎜  -moz-邊框-半徑：48px
；  
341.  邊框-半徑：48px；