Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > H5-Tutorial > Hauptteil

Erstellen Sie Animations-Spezialeffekte basierend auf HTML5_html5-Tutorial-Fähigkeiten

WBOY
Freigeben： 2016-05-16 15:45:54
Original
1583 Leute haben es durchsucht

Dies ist ein auf HTML5 basierender Zahnradanimations-Spezialeffekt. Wir konvertieren die physikalischen Prinzipien der Zahnraddrehung in HTML5-Code und implementieren den Animationseffekt der simulierten Zahnraddrehung auf der Webseite. Das größte Merkmal dieser Zahnradanimation besteht darin, dass sie aus mehreren Zahnrädern besteht, was die Algorithmusanforderungen für die Zahnradübertragung erheblich erhöht. Darüber hinaus haben wir zur Implementierung kein JavaScript, sondern reines CSS3 verwendet.

HTML-Code

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

CSS-Code

CSS-CodeInhalt in die Zwischenablage kopieren
  1. #level{   
  2.  Breite:100 %;   
  3.  Höhe:1px;   
  4.  Position:absolut;   
  5.  oben:50 %;   
  6. }   
  7. #contentt{   
  8.  text-align:center;   
  9.  margin-top:-327px;   
  10. }   
  11. #gears{   
  12.  Breite:478px;   
  13.  Höhe:655px;   
  14.  Position:relativ;   
  15.  Anzeige:inline-Block;   
  16.  vertikal ausrichten:Mitte;   
  17. }   
  18. #gears-statisch{   
  19.  Hintergrund:URL(FgFnjks.png) keine Wiederholung  -363px -903px;   
  20.  Breite:329px;   
  21.  Höhe:602px;   
  22.  Position:absolut;   
  23.  untenunten:5px;   
  24.  richtigrichtig:0px;   
  25.  Deckkraft:0,4;   
  26. }   
  27. #title{   
  28.  vertikal ausrichten:Mitte;   
  29.  Farbe:#9EB7B5;   
  30.  Breite:43 %;   
  31.  Anzeige:inline-Block;   
  32. }  
  33. #title h1{   
  34.  Schriftfamilie: 'PTSansNarrowBold', Sans-Serif ;   
  35.  Schriftgröße:3.6em;   
  36.  text-shadow:rgba(0, 0, 0, 0.36) 7px 7px 10px;   
  37. }   
  38. #title p{   
  39.  Schriftfamilie: Sans-Serif;   
  40.  Schriftgröße:1.2em;   
  41.  Linienhöhe: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.  Hintergrund: URL(FgFnjks.png) keine Wiederholung  0 -993px;   
  54.  Breite: 321px;   
  55.  Höhe: 321px;   
  56.  Position:absolut;   
  57.  links:45px;   
  58.  oben:179px;   
  59.   
  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: 24000 ms linear unendlich zurückdrehen;   
  64. }  
  65. #shadow15{   
  66.  Breite:306px;   
  67.  Höhe:306px;   
  68.  -webkit-border-radius:153px;   
  69.  -moz-border-radius:153px;   
  70.  Rahmen-Radius:153px;   
  71.  Position:absolut;   
  72.  links:52px;   
  73.  oben:186px;   
  74. }   
  75. #gear14{   
  76.  Hintergrund: URL(FgFnjks.png) keine Wiederholung  0 -856px;   
  77.  Breite: 87px;   
  78.  Höhe: 87px;   
  79.  Position:absolut;   
  80.  links:162px;   
  81.  oben:296px;   
  82. }   
  83. #shadow14{   
  84.  Breite:70px;   
  85.  Höhe:70px;   
  86.  -webkit-border-radius:35px;   
  87.  -moz-border-radius:35px;   
  88.  Rahmen-Radius:35px;   
  89.  Position:absolut;   
  90.  links:171px;   
  91.  oben:304px;   
  92. }  
  93. #gear13{   
  94.  Hintergrund: URL(FgFnjks.png) keine Wiederholung  0 -744px;   
  95.  Breite: 62px;   
  96.  Höhe: 62px;   
  97.  Position:absolut;   
  98.  links:174px;   
  99.  oben:309px;   
  100.   
  101.  -webkit-animation: rotate 8000ms linear infinite;   
  102.  -moz-animation: rotate 8000ms linear infinite;   
  103.  -ms-animation: rotate 8000ms linear infinite;   
  104.  Animation: 8000 ms linear unendlich drehen;   
  105. }   
  106. #shadow13{   
  107.  Breite:36px;   
  108.  Höhe:36px;   
  109.  -webkit-border-radius:18px;   
  110.  -moz-border-radius:18px;   
  111.  Rahmen-Radius:18px;   
  112.  Position:absolut;   
  113.  links:187px;   
  114.  oben:322px;   
  115. }   
  116.   
  117. /*gear-system-2*/  
  118. #gear10{   
  119.  Hintergrund: URL(FgFnjks.png) keine Wiederholung  0 -184px;   
  120.  Breite: 122px;   
  121.  Höhe: 122px;   
  122.  Position:absolut;   
  123.  links:175px;   
  124.  oben:0;   
  125.   
  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: 8000 ms linear unendlich zurückdrehen;   
  130. }  
  131. #shadow10{   
  132.  Breite:86px;   
  133.  Höhe:86px;   
  134.  -webkit-border-radius:43px;   
  135.  -moz-border-radius:43px;   
  136.  Rahmen-Radius:43px;   
  137.  Position:absolut;   
  138.  links:193px;   
  139.  oben:18px;   
  140. }   
  141. #gear3{   
  142.  Hintergrund: URL(FgFnjks.png) keine Wiederholung  0 -1493px;   
  143.  Breite: 85px;   
  144.  Höhe: 84px;   
  145.  Position:absolut;   
  146.  links:194px;   
  147.  oben:19px;   
  148.   
  149.  -webkit-animation: rotate 10000ms linear infinite;   
  150.  -moz-animation: rotate 10000ms linear infinite;   
  151.  -ms-animation: 10000 ms linear unendlich drehen;   
  152.  Animation: 10000 ms linear unendlich drehen;   
  153. }   
  154. #shadow3{   
  155.  Breite:60px;   
  156.  Höhe:60px;   
  157.  -webkit-border-radius:30px;   
  158.  -moz-border-radius:30px;   
  159.  Rahmen-Radius:30px;   
  160.  Position:absolut;   
  161.  links:206px;   
  162.  oben:31px;   
  163. }  
  164.   
  165. /*gear-system-3*/  
  166. #gear9{   
  167.  Hintergrund: URL(FgFnjks.png) keine Wiederholung  -371px -280px;   
  168.  Breite: 234px;   
  169.  Höhe: 234px;   
  170.  Position:absolut;   
  171.  links:197px;   
  172.  oben:96px;   
  173.   
  174.  -webkit-animation: rotate 12000ms linear infinite;   
  175.  -moz-animation: rotate 12000ms linear infinite;   
  176.  -ms-animation: 12000 ms linear unendlich drehen;   
  177.  Animation: 12000 ms linear unendlich drehen;   
  178. }   
  179. #shadow9{   
  180.  Breite:200px;   
  181.  Höhe:200px;   
  182.  -webkit-border-radius:100px;   
  183.  -moz-border-radius:100px;   
  184.  Rahmen-Radius:100px;   
  185.  Position:absolut;   
  186.  links:214px;   
  187.  oben:113px;   
  188. }   
  189. #gear7{   
  190.  Hintergrund: URL(FgFnjks.png) keine Wiederholung  -371px 0;   
  191.  Breite: 108px;   
  192.  Höhe: 108px;   
  193.  Position:absolut;   
  194.  links:260px;   
  195.  oben:159px;   
  196.   
  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: 10000 ms linear unendlich zurückdrehen;   
  201. }  
  202. #shadow7{   
  203.  Breite:76px;   
  204.  Höhe:76px;   
  205.  -webkit-border-radius:38px;   
  206.  -moz-border-radius: 38px;   
  207.  Rahmen-Radius: 38px;   
  208.  Position:absolut;   
  209.  links:276px;   
  210.  oben:175px;   
  211. }   
  212.   
  213. /*gear-system-4*/  
  214. #gear6{   
  215.  Hintergrund: URL(FgFnjks.png) keine Wiederholung  0 -1931px;   
  216.  Breite: 134px;   
  217.  Höhe: 134px;   
  218.  Position:absolut;   
  219.  links:305px;   
  220.  untenunten:212px;   
  221.   
  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: 10000 ms linear unendlich zurückdrehen;   
  226. }   
  227. #shadow6{   
  228.  Breite:98px;   
  229.  Höhe:98px;   
  230.  -webkit-border-radius:49px;   
  231.  -moz-border-radius: 49px;   
  232.  Rahmen-Radius: 49px;   
  233.  Position:absolut;   
  234.  links:323px;   
  235.  untenunten:230px;   
  236. }  
  237. #gear4{   
  238.  Hintergrund: URL(FgFnjks.png) keine Wiederholung  0 -1627px;   
  239.  Breite: 69px;   
  240.  Höhe: 69px;   
  241.  Position:absolut;   
  242.  links:337px;   
  243.  untenunten:245px;   
  244.   
  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: 10000 ms linear unendlich zurückdrehen;   
  249. }   
  250.   
  251. /*gear-system-5*/  
  252. #gear12{   
  253.  Hintergrund: URL(FgFnjks.png) keine Wiederholung  0 -530px;   
  254.  Breite: 164px;   
  255.  Höhe: 164px;   
  256.  Position:absolut;   
  257.  links:208px;   
  258.  untenunten:85px;   
  259.   
  260.  -webkit-animation: rotate 8000ms linear infinite;   
  261.  -moz-animation: rotate 8000ms linear infinite;   
  262.  -ms-animation: rotate 8000ms linear infinite;   
  263.  Animation: 8000 ms linear unendlich drehen;   
  264. }  
  265. #shadow12{   
  266.  Breite:124px;   
  267.  Höhe:124px;   
  268.  -webkit-border-radius:62px;   
  269.  -moz-border-radius:62px;   
  270.  Rahmen-Radius:62px;   
  271.  Position:absolut;   
  272.  links:225px;   
  273.  untenunten:107px;   
  274. }   
  275. #gear11{   
  276.  Hintergrund: URL(FgFnjks.png) keine Wiederholung  0 -356px;   
  277.  Breite: 125px;   
  278.  Höhe: 124px;   
  279.  Position:absolut;   
  280.  links:228px;   
  281.  untenunten:105px;   
  282.   
  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: 10000 ms linear unendlich zurückdrehen;   
  287. }   
  288. #shadow11{   
  289.  Breite:88px;   
  290.  Höhe:88px;   
  291.  -webkit-border-radius:44px;   
  292.  -moz-border-radius:44px;   
  293.  Rahmen-Radius:44px;   
  294.  Position:absolut;   
  295.  links:247px;   
  296.  untenunten:123px;   
  297. }  
  298. #gear8{   
  299.  Hintergrund: URL(FgFnjks.png) keine Wiederholung  -371px -158px;   
  300.  Breite: 72px;   
  301.  Höhe: 72px;   
  302.  Position:absolut;   
  303.  links:254px;   
  304.  untenunten:131px;   
  305.   
  306.  -webkit-animation: rotate 6000ms linear infinite;   
  307.  -moz-animation: 6000 ms linear unendlich drehen;   
  308.  -ms-animation: 6000 ms linear unendlich drehen;   
  309.  Animation: 6000 ms linear unendlich drehen;   
  310. }   
  311. #shadow8{   
  312.  Breite:42px;   
  313.  Höhe:42px;   
  314.  -webkit-border-radius:21px;   
  315.  -moz-border-radius: 21px;   
  316.  Rahmen-Radius: 21px;   
  317.  Position:absolut;   
  318.  links:269px;   
  319.  untenunten:146px;   
  320. }  
  321.   
  322. /*gear1*/  
  323. #gear1{   
  324.  arrière-plan : url(FgFnjks.png) pas de répétition  0 0 ;   
  325.  largeur : 135px ;   
  326.  hauteur : 134px ;   
  327.  position :absolue ;   
  328.  gauche :83px ;   
  329.  basbas :111px ;   
  330.   
  331.  -webkit-animation : rotation arrière 10 000 ms linéaire infinie ;   
  332.  -moz-animation : rotation arrière 10 000 ms linéaire infinie ;   
  333.  -ms-animation : rotation arrière 10 000 ms linéaire infini ;   
  334.  animation : rotation arrière 10 000 ms linéaire infinie ;   
  335. }   
  336. #ombre1{   
  337.  largeur :96px ;   
  338.  hauteur :96px ;   
  339.  -webkit-bordure-radius :48px;   
  340.  -moz-bordure-radius :48px;   
  341.  bordure-rayon :48px;   
Verwandte Etiketten：
html5
Quelle：php.cn
Vorheriger Artikel：Eine kurze Analyse der WebSocket- und Server-Push-Events_html5-Tutorialfähigkeiten von HTML5 Nächster Artikel：Detaillierte Erläuterung der grundlegenden Verwendung der Kommunikations-API in HTML5_html5-Tutorial-Fähigkeiten
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
Wie kann ich dafür sorgen, dass mein Bild auf der Hauptanzeige der Seite erscheint? Ich möchte einige Fotos über NASAAPI erhalten. Diese Fotos werden dann im Miniaturbild und...
Aus 2024-04-06 15:33:12
0
1
433
Können PDF-Dateien mit HTML5 und Javascript ausgeführt werden? Ich habe die dumme Idee, ein Programm zu erstellen, das auf keinem Computer blockiert wird...
Aus 2024-04-05 12:57:00
0
1
456
Was ist der Unterschied zwischen enctype und formenctype in HTML5? Ich frage mich nur, was der Unterschied zwischen den Attributen enctype und formenctype in...
Aus 2024-04-02 11:47:56
0
1
275
Die Seite mobilfreundlich gestalten? Ich habe viele Webseiten und einige Websites. Die Sache ist, ich bin ein Anfänger. Ich ver...
Aus 2024-04-01 20:42:38
0
1
259
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage