suchen

Heim >Web-Frontend >H5-Tutorial >Erstellen Sie Animations-Spezialeffekte basierend auf HTML5_html5-Tutorial-Fähigkeiten

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

WBOY
WBOYOriginal
2016-05-16 15:45:541641Durchsuche

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;   
Stellungnahme：
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
Vorheriger Artikel：Eine kurze Analyse der WebSocket- und Server-Push-Events_html5-Tutorialfähigkeiten von HTML5Nächster Artikel：Eine kurze Analyse der WebSocket- und Server-Push-Events_html5-Tutorialfähigkeiten von HTML5

In Verbindung stehende Artikel

Mehr sehen