Kemahiran tutorial animasi_html5 jatuh daun HTML5 yang realistik

Animasi jatuh daun HTML5 ini adalah berdasarkan teras webkit, yang bermaksud bahawa animasi ini hanya boleh digunakan pada penyemak imbas dengan teras webkit.

Muat turun kod sumber Alamat demo

Kod HTML

Kod XML/HTMLSalin kandungan ke papan keratan

1. div id="bekas" >
4. div id="bekas daun" >div>
6. div id="mesej" >
em> div>
7. div>
8. Kod CSS Kod CSSSalin kandungan ke papan keratan
1. #container {   
2.     kedudukan: saudara;   
3.     tinggi: 700px;   
4.     lebar: 500px;   
5.     margin: 10px auto;   
6.     limpahan: tersembunyi;   
7.     sempadan: 4px pepejal #5C090A;   
    
8. latar belakang: #4E4226 url( >'images/backgroundLeaves.jpg') tiada ulangan atas kiri;   
}   
  
11. /* Mentakrifkan kedudukan dan dimensi bagi  leafContainer div */  
12. #leafCopenampung    
{   
    
14. kedudukan: mutlak;   
    
15. lebar: 100%;   
    
16. tinggi: 100%;   
}  
17.   
18. /* Mentakrifkan penampilan, kedudukan dan dimensi div mesej */  
19. #message   
20. {   
21.     kedudukan: mutlak;   
22.     atas: 160px;   
23.     lebar: 100%;   
24.     tinggi: 300px;   
25.     latar belakang:telus url( 'images/textBackground.png') ulang-x tengah;   
26.     warna: #5C090A;   
27.     saiz fon: 220%;   
28.     fon-keluarga: 'Georgia';   
29.     selaraskan teks: tengah;   
30.     pelapis: 20px 10px;   
31.     -saiz-kotak-webkit: sempadan-kotak;   
32.     -webkit-latar belakang-saiz: 100% 100%;   
33.     z-indeks: 1;   
34. }   
35.   
36. p {   
37.   margin: 15px;   
38. }   
39.   
40. a   
41. {   
42.   warna: #5C090A;   
43.   teks-hiasan: tiada;   
44. }   
45.   
46. /* Menetapkan warna mesej "Dino's Gardening Service" */  
47. em    
48. {   
49.     berat fon: tebal;   
50.     gaya fon: biasa;   
51. }   
52.   
53. .telefon {   
54.   saiz fon: 150%;   
55.   menjajarkan menegak: tengah;   
56. }  
57.   
58. /* Peraturan CSS ini digunakan kepada semua elemen div dalam div leafContainer.  
59.    Ia menggayakan dan menghidupkan setiap daunDiv.  
60. */  
61. #leafContainer > div    
62. {   
63.     kedudukan: mutlak;   
64.     lebar: 100px;   
65.     tinggi: 100px;   
66.   
67.     /* Kami menggunakan sifat berikut untuk menggunakan animasi pudar dan jatuh pada setiap daun.  
68.        Setiap sifat ini mengambil dua nilai. Nilai ini masing berpadanan dengan tetapan  
69.        untuk pudar dan jatuh.  
70.     */  
71.     -webkit-animation-iteration-count: infinite, infinite;   
72.     -webkit-animasi-arah: biasa, biasa;   
73.     -webkit-animation-timing-function: linear, ease-in;   
74. }  
75.   
76. /* Peraturan CSS ini digunakan kepada semua elemen img secara langsung di dalam elemen div yang  
77.    terus di dalam div leafContainer. Dalam erti kata lain, ia sepadan dengan elemen 'img'  
78.    di dalam leafDivs yang dicipta dalam fungsi createALeaf() .  
79. */  
80. #leafContainer > div > img {   
81.      kedudukan: mutlak;   
82.      lebar: 100px;   
83.      tinggi: 100px;   
84.   
85.     /* Kami menggunakan sifat berikut untuk melaraskan Putaran mengikut arah jam atau lawan PutarDanFlip lawan jam  
86.        animasi pada setiap daun.  
87.        Fungsi createALeaf dalam fail Leaves.js menentukan sama ada sehelai daun mempunyai    
88.        Animasi Putar atau lawan arah jamSpinAndFlip .  
89.     */  
90.      -webkit-animation-iteration-count: infinite;   
91.      -webkit-animasi-arah: ganti;   
92.      -webkit-animation-timing-function: ease-in-out;   
93.      -webkit-transform-origin: 50% -100%;   
94. }   
95.   
96. /* Menyembunyikan sehelai daun ke arah  hujung      animasi */  
97. @-webkit-keyframes pudar   
98. {   
99.     /* Tunjukkan sehelai daun semasa ke atau di bawah 95 peratus dari   animasi dan sembunyikan ia, jika tidak */  >
100.     0%   { kelegapan: 1; }   
101.     95%  { kelegapan: 1; }   
102.     100% { kelegapan: 0; }   
103. }  
104.   
105. /* Menjadikan sehelai daun jatuh dari -300 ke 600 piksel dalam paksi-y */  
106. @-webkit-keyframes jatuhkan   
107. {   
108.     /* Alihkan sehelai daun ke -300 piksel dalam paksi-y pada  permulaan animasi */  >
109.     0%   { -webkit-transform: translate(0px, -50px); }   
110.     /* Alihkan sehelai daun ke 600 piksel dalam paksi-y di hujung animasi */  
111.     100% { -webkit-transform: translate(0px, 650px); }   
112. }   
113.   
114. /* Memutar sehelai daun dari -50 ke 50 darjah dalam ruang 2D */  
115. @-webkit-keyframes mengikut arah jamPusing   
116. {   
117.     /* Putar sehelai daun sebanyak -50 darjah dalam ruang 2D di  permulaan animasi */  
118.     0%   { -webkit-transform: putar(-50deg); }   
119.     /*  Putar sehelai daun sebanyak 50 darjah dalam ruang 2D di hujung animasi */  
120.     100% { -webkit-transform: putar(50deg); }   
121. }   
122.   
123. /* Terbalikkan sehelai daun dan putar ia dari 50 ke -50 darjah dalam ruang 2D */  
124. @-webkit-keyframes lawan arah jamSpinAndFlip    
125. {   
126.     /* Terbalikkan sehelai daun dan putar sebanyak 50 darjah dalam ruang 2D di  permulaan animasi */  >
    0%   { -webkit-transform: skala(-1, 1) putar(50deg); }   
    
128. /* Terbalikkan sehelai daun dan putar sebanyak -50 darjah dalam ruang 2D di hujung animasi */  >     100% { -webkit-transform: skala(-1, 1) putar(-50deg); }   
129. }   
JavaScript代码

Kod JavaScript

复制内容到剪贴板

1. /* Tentukan bilangan daun yang  digunakan dalam  animasi */  
2. konst BILANGAN_CUTI = 30;   
3.   
4. /*   
5.     Dipanggil apabila halaman "Daun Gugur" dimuat sepenuhnya.  
6. */  
7. fungsi init()   
8. {   
9.     /* Dapatkan rujukan ke elemen yang akan mengandungi daun */  
10.     var bekas = document.getElementById('leafContainer');   
11.     /* Isi bekas kosong dengan daun baharu */  
12.     untuk (var i = 0; i 
    {   
        bekas.appendChild(createALeaf());   
    }   
}   
  
18. /*  
19.     Menerima nilai terrendah dan tertinggi dari julat dan  
20.     mengembalikan integer rawak yang berada dalam julat itu.  
21. */  
22. fungsi rawakInteger(rendah, tinggi)   
{   
    
24. kembali rendah   Math.floor(Math.random() * (high - rendah));   
}   
  
27. /*  
28.    Menerima nilai rendah dan tertinggi dari julat dan  
29.    mengembalikan apungan rawak yang berada dalam julat itu.  
30. */  
31. fungsi rawakFloat(rendah, tinggi)   
{   
    
33. kembali rendah   Math.random() * (tinggi - rendah);   
}   
  
36. /*  
37.     Menerima nombor dan mengembalikan nilai pixel CSS nya.  
38. */  
39. fungsi PixelValue(nilai)   
{   
    
41. pulangan nilai   'px';   
}  
42.   
43. /*  
44.     Mengembalikan nilai tempoh untuk animasi yang jatuh.  
45. */  
46.   
47. fungsi durationValue(value)   
48. {   
49.     pulangan nilai   ';   
50. }  
51.   
52. /*  
53.     Menggunakan elemen img untuk membuat setiap daun. "Leaves.css" melaksanakan dua putaran   
54.     animasi untuk  daun: Putar mengikut arah jam dan PusingDanFlip lawan jam. Ini  
55.     fungsi menentukan yang mana dari animasi putaran ini harus digunakan pada setiap daun.  
56.  
57. */  
58. fungsi createALeaf()   
59. {   
60.     /* Mulakan dengan membuat div pembungkus dan elemen img kosong */  
61.     var leafDiv = document.createElement('div');   
62.     var imej = document.createElement('img');   
63.   
64.     /* Pilih imej daun secara rawak dan tetapkan ia ke elemen yang baru dibuat */  
65.     image.src = 'images/realLeaf'   randomInteger(1, 5)   '.png';   
66.   
67.     leafDiv.style.top = "-100px";   
68.   
69.     /* Letakkan daun di lokasi rawak di sepanjang skrin */  
70.     leafDiv.style.left = pixelValue(randomInteger(0, 500));   
71.   
72.     /* Pilih secara rawak animasi putar */  
73.     var spinAnimationName = (Math.random() 'Putar mengikut arah jam' : 'Putar lawan jamDanFlip';   
74.   
75.     /* Tetapkan sifat -webkit-animation-name dengan nilai ini */  
76.     leafDiv.style.webkitAnimationName = 'pudar, jatuhkan';   
77.     image.style.webkitAnimationName = spinAnimationName;   
78.   
79.     /* Tentukan tempoh rawak untuk   fade dan drop animasi */  
80.     var fadeAndDropDuration = durationValue(randomFloat(5, 11));   
81.   
82.     /* Ketahui masa rawak lain untuk animasi pusing */  
83.     var spinDuration = durationValue(randomFloat(4, 8));   
84.     /* Tetapkan sifat -webkit-animation-duration dengan nilai ini */  
85.     leafDiv.style.webkitAnimationDuration = fadeAndDropDuration   ', '   fadeAndDropDuration;   
86.   
87.     var leafDelay = durationValue(randomFloat(0, 5));   
88.     leafDiv.style.webkitAnimationDelay = leafDelay   ', '   leafDelay;   
89.   
90.     image.style.webkitAnimationDuration = spinDuration;   
91.   
92.     // tambah  ke 
      
93.     leafDiv.appendChild(imej);   
94.   
95.     /* Kembalikan elemen img ini supaya ia boleh ditambahkan pada  dokumen */  
96.     kembali leafDiv;   
97. }   
98.   
99. /* Memanggil fungsi init apabila halaman "Daun Gugur"  dimuat penuh */  
100. window.addEventListener('load', init, false);   

以上就是本文的全部内容，希望对大家学习有所帮助。