masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
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
Lepaskan： 2016-05-16 15:45:54
asal
1599 orang telah melayarinya

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;   
Label berkaitan：
html5
sumber：php.cn
Artikel sebelumnya：Analisis ringkas tentang kemahiran tutorial WebSocket dan server push events_html5 HTML5 Artikel seterusnya：Penjelasan terperinci tentang penggunaan asas API Komunikasi dalam kemahiran tutorial HTML5_html5
Kenyataan Laman Web ini
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 terbaru oleh pengarang
Isu terkini
Bagaimanakah saya boleh mendapatkan imej saya dipaparkan pada paparan utama halaman? Apa yang saya mahu lakukan ialah menerima beberapa gambar menggunakan NASAAPI. Foto-foto i...
daripada 2024-04-06 15:33:12
0
1
433
Bolehkah fail PDF menjalankan HTML5 dan Javascript? Saya mempunyai idea bodoh untuk mencuba dan membuat program yang tidak akan disekat pada m...
daripada 2024-04-05 12:57:00
0
1
456
Apakah perbezaan antara enctype dan formenctype dalam HTML5? Saya hanya tertanya-tanya apakah perbezaan antara atribut enctype dan formenctype dalam HT...
daripada 2024-04-02 11:47:56
0
1
275
Jadikan halaman itu mesra mudah alih? Saya mempunyai banyak halaman web dan beberapa laman web. Masalahnya, saya seorang pemula....
daripada 2024-04-01 20:42:38
0
1
259
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan