cari

Rumah >hujung hadapan web >Tutorial H5 >Kesan khas animasi gear berdasarkan kemahiran tutorial HTML5_html5

Kesan khas animasi gear berdasarkan kemahiran tutorial HTML5_html5

WBOY
WBOYasal
2016-05-16 15:45:541643semak imbas

Ini ialah kesan khas animasi gear berdasarkan HTML5 Kami menukar prinsip fizikal putaran gear kepada kod HTML5 dan melaksanakan kesan animasi putaran gear simulasi pada halaman web. Ciri terbesar animasi gear ini ialah ia terdiri daripada berbilang gear, yang sangat meningkatkan keperluan algoritma untuk penghantaran gear Selain itu, kami tidak menggunakan JavaScript, tetapi CSS3 tulen untuk melaksanakannya.

Kod HTML

Kod XML/HTMLSalin kandungan ke papan keratan
  1. <div id="peringkat" >  
  2.  <div id="kandungan" >  
  3.   <div id="gear" >  
  4.    <div id="gears- statik">div>  
  5.    <div id="gear- sistem-1">  
  6.     <div kelas="bayangan"  id="bayang15"><>div>  
  7.     <div id="gear15" >div>  
  8.     <div kelas="bayangan"  id="bayang14">div>  
  9.     <div id="gear14" >div>  
  10.     <div kelas="bayangan"  id="bayang13"><>div>  
  11.     <div id="gear13" >div>  
  12.    div>  
  13.    <div id="gear- sistem-2">  
  14.     <div kelas="bayangan"  id="bayang10"><>div>  
  15.     <div id="gear10" >div>  
  16.     <div kelas="bayangan"  id="shadow3">div>  
  17.     <div id="gear3" >div>  
  18.    div>  
  19.    <div id="gear- sistem-3">  
  20.     <div kelas="bayangan"  id="bayang9"><>div>  
  21.     <div id="gear9" >div>  
  22.     <div kelas="bayangan"  id="bayang7">div>  
  23.     <div id="gear7" >div>  
  24.    div>  
  25.    <div id="gear- sistem-4">  
  26.     <div kelas="bayangan"  id="bayang6">div>  
  27.     <div id="gear6" >div>  
  28.     <div id="gear4" >div>  
  29.    div>  
  30.    <div id="gear- sistem-5">  
  31.     <div kelas="bayangan"  id="bayang12">div>  
  32.     <div id="gear12" >div>  
  33.     <div kelas="bayangan"  id="shadow11"><>div>  
  34.     <div id="gear11" >div>  
  35.     <div kelas="bayangan"  id="bayang8">div>  
  36.     <div id="gear8" >div>  
  37.    div>  
  38.    <div kelas="bayangan"  id="bayang1">div>  
  39.    <div id="gear1" >div>  
  40.    <div id="gear- sistem-6">  
  41.     <div kelas="bayangan"  id="bayang5">div>  
  42.     <div id="gear5" >div>  
  43.     <div id="gear2" >div>  
  44.    div>  
  45.    <div kelas="bayangan"  id="shadowweight"><>div>  
  46.    <div id="rantai- bulatan">div>  
  47.    <div id="rantai" >div>  
  48.    <div id="berat" >div>  
  49.   div>  
  50.  div>  
  51. div>  

Kod CSS

Kod CSSSalin kandungan ke papan keratan
  1. #level{   
  2.  lebar:100%;   
  3.  tinggi:1px;   
  4.  kedudukan:mutlak;   
  5.  atas:50%;   
  6. }   
  7. #content{   
  8.  text-align:center;   
  9.  margin-atas:-327px;   
  10. }   
  11. #gears{   
  12.  lebar:478px;   
  13.  tinggi:655px;   
  14.  kedudukan:saudara;   
  15.  paparan:sebaris-sekat;   
  16.  menjajarkan menegak:tengah;   
  17. }   
  18. #gears-statik{   
  19.  latar belakang:url(FgFnjks.png) tidak berulang  -363px -903px;   
  20.  lebar:329px;   
  21.  tinggi:602px;   
  22.  kedudukan:mutlak;   
  23.  bawahbawah:5px;   
  24.  kanankanan:0px;   
  25.  kelegapan:0.4;   
  26. }   
  27. #tajuk{   
  28.  menjajarkan menegak:tengah;   
  29.  warna:#9EB7B5;   
  30.  lebar:43%;   
  31.  paparan:sebaris-sekat;   
  32. }  
  33. #tajuk h1{   
  34.  font-family: 'PTSansNarrowBold', sans-serif ;   
  35.  saiz fon:3.6em;   
  36.  bayang teks:rgba(0, 0, 0, 0.36) 7px 7px 10px;   
  37. }   
  38. #tajuk p{   
  39.  fon-keluarga: sans-serif;   
  40.  saiz fon:1.2em;   
  41.  tinggi garis:148%;   
  42.  bayang teks:rgba(0, 0, 0, 0.36) 1px 1px 0px;   
  43. }   
  44.   
  45. .bayang{   
  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.  bayang kotak: 4px 7px 25px 10px rgba(43, 36, 0, 0.36);   
  49. }   
  50.   
  51. /*gear-system-1*/  
  52. #gear15{   
  53.  latar belakang: url(FgFnjks.png) tidak berulang  0 -993px;   
  54.  lebar: 321px;   
  55.  tinggi: 321px;   
  56.  kedudukan:mutlak;   
  57.  kiri:45px;   
  58.  atas:179px;   
  59.   
  60.  -webkit-animasi: putar balik 24000ms linear tak terhingga;   
  61.  -animasi-moz: putar balik 24000ms linear tak terhingga;   
  62.  -ms-animasi: putar-belakang 24000ms linear tak terhingga;   
  63.  animasi: putar ke belakang 24000ms linear tak terhingga;   
  64. }  
  65. #bayangan15{   
  66.  lebar:306px;   
  67.  tinggi:306px;   
  68.  -webkit-sempadan-jejari:153px;   
  69.  -moz-sempadan-jejari:153px;   
  70.  sempadan-jejari:153px;   
  71.  kedudukan:mutlak;   
  72.  kiri:52px;   
  73.  atas:186px;   
  74. }   
  75. #gear14{   
  76.  latar belakang: url(FgFnjks.png) tidak berulang  0 -856px;   
  77.  lebar: 87px;   
  78.  tinggi: 87px;   
  79.  kedudukan:mutlak;   
  80.  kiri:162px;   
  81.  atas:296px;   
  82. }   
  83. #bayangan14{   
  84.  lebar:70px;   
  85.  tinggi:70px;   
  86.  -webkit-sempadan-jejari:35px;   
  87.  -moz-sempadan-jejari:35px;   
  88.  sempadan-jejari:35px;   
  89.  kedudukan:mutlak;   
  90.  kiri:171px;   
  91.  atas:304px;   
  92. }  
  93. #gear13{   
  94.  latar belakang: url(FgFnjks.png) tidak berulang  0 -744px;   
  95.  lebar: 62px;   
  96.  tinggi: 62px;   
  97.  kedudukan:mutlak;   
  98.  kiri:174px;   
  99.  atas:309px;   
  100.   
  101.  -webkit-animasi: putar 8000ms linear tak terhingga;   
  102.  -moz-animasi: putar 8000ms linear tak terhingga;   
  103.  -ms-animasi: putar 8000ms linear tak terhingga;   
  104.  animasi: putar 8000ms linear tak terhingga;   
  105. }   
  106. #bayangan13{   
  107.  lebar:36px;   
  108.  tinggi:36px;   
  109.  -webkit-sempadan-jejari:18px;   
  110.  -moz-sempadan-jejari:18px;   
  111.  sempadan-jejari:18px;   
  112.  kedudukan:mutlak;   
  113.  kiri:187px;   
  114.  atas:322px;   
  115. }   
  116.   
  117. /*gear-system-2*/  
  118. #gear10{   
  119.  latar belakang: url(FgFnjks.png) tidak berulang  0 -184px;   
  120.  lebar: 122px;   
  121.  tinggi: 122px;   
  122.  kedudukan:mutlak;   
  123.  kiri:175px;   
  124.  atas:0;   
  125.   
  126.  -webkit-animasi: putar-belakang 8000ms linear tak terhingga;   
  127.  -moz-animasi: putar balik 8000ms linear tak terhingga;   
  128.  -ms-animasi: putar-belakang 8000ms linear tak terhingga;   
  129.  animasi: putar ke belakang 8000ms linear tak terhingga;   
  130. }  
  131. #bayangan10{   
  132.  lebar:86px;   
  133.  tinggi:86px;   
  134.  -webkit-sempadan-jejari:43px;   
  135.  -moz-sempadan-jejari:43px;   
  136.  sempadan-jejari:43px;   
  137.  kedudukan:mutlak;   
  138.  kiri:193px;   
  139.  atas:18px;   
  140. }   
  141. #gear3{   
  142.  latar belakang: url(FgFnjks.png) tidak berulang  0 -1493px;   
  143.  lebar: 85px;   
  144.  tinggi: 84px;   
  145.  kedudukan:mutlak;   
  146.  kiri:194px;   
  147.  atas:19px;   
  148.   
  149.  -webkit-animasi: putar 10000ms linear tak terhingga;   
  150.  -moz-animasi: putar 10000ms linear tak terhingga;   
  151.  -ms-animasi: putar 10000ms linear tak terhingga;   
  152.  animasi: putar 10000ms linear tak terhingga;   
  153. }   
  154. #bayangan3{   
  155.  lebar:60px;   
  156.  tinggi:60px;   
  157.  -webkit-sempadan-jejari:30px;   
  158.  -moz-sempadan-jejari:30px;   
  159.  sempadan-jejari:30px;   
  160.  kedudukan:mutlak;   
  161.  kiri:206px;   
  162.  atas:31px;   
  163. }  
  164.   
  165. /*gear-system-3*/  
  166. #gear9{   
  167.  latar belakang: url(FgFnjks.png) tidak berulang  -371px -280px;   
  168.  lebar: 234px;   
  169.  tinggi: 234px;   
  170.  kedudukan:mutlak;   
  171.  kiri:197px;   
  172.  atas:96px;   
  173.   
  174.  -webkit-animasi: putar 12000ms linear tak terhingga;   
  175.  -moz-animasi: putar 12000ms linear tak terhingga;   
  176.  -ms-animasi: putar 12000ms linear tak terhingga;   
  177.  animasi: putar 12000ms linear tak terhingga;   
  178. }   
  179. #bayangan9{   
  180.  lebar:200px;   
  181.  tinggi:200px;   
  182.  -webkit-sempadan-jejari:100px;   
  183.  -moz-sempadan-jejari:100px;   
  184.  sempadan-jejari:100px;   
  185.  kedudukan:mutlak;   
  186.  kiri:214px;   
  187.  atas:113px;   
  188. }   
  189. #gear7{   
  190.  latar belakang: url(FgFnjks.png) tidak berulang  -371px 0;   
  191.  lebar: 108px;   
  192.  tinggi: 108px;   
  193.  kedudukan:mutlak;   
  194.  kiri:260px;   
  195.  atas:159px;   
  196.   
  197.  -webkit-animasi: putar-belakang 10000ms linear tak terhingga;   
  198.  -moz-animasi: putar-belakang 10000ms linear tak terhingga;   
  199.  -ms-animasi: putar-belakang 10000ms linear tak terhingga;   
  200.  animasi: putar ke belakang 10000ms linear tak terhingga;   
  201. }  
  202. #bayangan7{   
  203.  lebar:76px;   
  204.  tinggi:76px;   
  205.  -webkit-sempadan-jejari:38px;   
  206.  -moz-sempadan-jejari: 38px;   
  207.  sempadan-jejari: 38px;   
  208.  kedudukan:mutlak;   
  209.  kiri:276px;   
  210.  atas:175px;   
  211. }   
  212.   
  213. /*gear-system-4*/  
  214. #gear6{   
  215.  latar belakang: url(FgFnjks.png) tidak berulang  0 -1931px;   
  216.  lebar: 134px;   
  217.  tinggi: 134px;   
  218.  kedudukan:mutlak;   
  219.  kiri:305px;   
  220.  bawahbawah:212px;   
  221.   
  222.  -webkit-animasi: putar-belakang 10000ms linear tak terhingga;   
  223.  -moz-animasi: putar-belakang 10000ms linear tak terhingga;   
  224.  -ms-animasi: putar-belakang 10000ms linear tak terhingga;   
  225.  animasi: putar ke belakang 10000ms linear tak terhingga;   
  226. }   
  227. #bayangan6{   
  228.  lebar:98px;   
  229.  tinggi:98px;   
  230.  -webkit-sempadan-jejari:49px;   
  231.  -moz-sempadan-jejari: 49px;   
  232.  sempadan-jejari: 49px;   
  233.  kedudukan:mutlak;   
  234.  kiri:323px;   
  235.  bawahbawah:230px;   
  236. }  
  237. #gear4{   
  238.  latar belakang: url(FgFnjks.png) tidak berulang  0 -1627px;   
  239.  lebar: 69px;   
  240.  tinggi: 69px;   
  241.  kedudukan:mutlak;   
  242.  kiri:337px;   
  243.  bawahbawah:245px;   
  244.   
  245.  -webkit-animasi: putar-belakang 10000ms linear tak terhingga;   
  246.  -moz-animasi: putar-belakang 10000ms linear tak terhingga;   
  247.  -ms-animasi: putar-belakang 10000ms linear tak terhingga;   
  248.  animasi: putar ke belakang 10000ms linear tak terhingga;   
  249. }   
  250.   
  251. /*gear-system-5*/  
  252. #gear12{   
  253.  latar belakang: url(FgFnjks.png) tidak berulang  0 -530px;   
  254.  lebar: 164px;   
  255.  tinggi: 164px;   
  256.  kedudukan:mutlak;   
  257.  kiri:208px;   
  258.  bawahbawah:85px;   
  259.   
  260.  -webkit-animasi: putar 8000ms linear tak terhingga;   
  261.  -moz-animasi: putar 8000ms linear tak terhingga;   
  262.  -ms-animasi: putar 8000ms linear tak terhingga;   
  263.  animasi: putar 8000ms linear tak terhingga;   
  264. }  
  265. #bayangan12{   
  266.  lebar:124px;   
  267.  tinggi:124px;   
  268.  -webkit-sempadan-jejari:62px;   
  269.  -moz-sempadan-jejari:62px;   
  270.  sempadan-jejari:62px;   
  271.  kedudukan:mutlak;   
  272.  kiri:225px;   
  273.  bawahbawah:107px;   
  274. }   
  275. #gear11{   
  276.  latar belakang: url(FgFnjks.png) tidak berulang  0 -356px;   
  277.  lebar: 125px;   
  278.  tinggi: 124px;   
  279.  kedudukan:mutlak;   
  280.  kiri:228px;   
  281.  bawahbawah:105px;   
  282.   
  283.  -webkit-animasi: putar-belakang 10000ms linear tak terhingga;   
  284.  -moz-animasi: putar-belakang 10000ms linear tak terhingga;   
  285.  -ms-animasi: putar-belakang 10000ms linear tak terhingga;   
  286.  animasi: putar ke belakang 10000ms linear tak terhingga;   
  287. }   
  288. #bayangan11{   
  289.  lebar:88px;   
  290.  tinggi:88px;   
  291.  -webkit-sempadan-jejari:44px;   
  292.  -moz-sempadan-jejari:44px;   
  293.  sempadan-jejari:44px;   
  294.  kedudukan:mutlak;   
  295.  kiri:247px;   
  296.  bawahbawah:123px;   
  297. }  
  298. #gear8{   
  299.  latar belakang: url(FgFnjks.png) tidak berulang  -371px -158px;   
  300.  lebar: 72px;   
  301.  tinggi: 72px;   
  302.  kedudukan:mutlak;   
  303.  kiri:254px;   
  304.  bawahbawah:131px;   
  305.   
  306.  -webkit-animasi: putar 6000ms linear tak terhingga;   
  307.  -moz-animasi: putar 6000ms linear tak terhingga;   
  308.  -ms-animasi: putar 6000ms linear tak terhingga;   
  309.  animasi: putar 6000ms linear tak terhingga;   
  310. }   
  311. #bayangan8{   
  312.  lebar:42px;   
  313.  tinggi:42px;   
  314.  -webkit-sempadan-jejari:21px;   
  315.  -moz-sempadan-jejari: 21px;   
  316.  sempadan-jejari: 21px;   
  317.  kedudukan:mutlak;   
  318.  kiri:269px;   
  319.  bawahbawah:146px;   
  320. }  
  321.   
  322. /*gear1*/  
  323. #gear1{   
  324.  Hintergrund: URL(FgFnjks.png) keine Wiederholung  0 0;   
  325.  Breite: 135px;   
  326.  Höhe: 134px;   
  327.  Position:absolut;   
  328.  links:83px;   
  329.  untenunten:111px;   
  330.   
  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: 10000 ms linear unendlich zurückdrehen;   
  335. }   
  336. #shadow1{   
  337.  Breite:96px;   
  338.  Höhe:96px;   
  339.  -webkit-border-radius:48px;   
  340.  -moz-border-radius:48px;   
  341.  Rahmen-Radius:48px;   
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Analisis ringkas tentang kemahiran tutorial WebSocket dan server push events_html5 HTML5Artikel seterusnya：Analisis ringkas tentang kemahiran tutorial WebSocket dan server push events_html5 HTML5

Artikel berkaitan

Lihat lagi