逼真的HTML5树叶飘落动画

这款HTML5树叶飘落动画是基于webkit内核的，也就是说要在webkit内核的浏览器上才能使用这款动画。

源码下载 演示地址

HTML代码

1. <div id="container">  
2.   <!-- The container is dynamically populated using the init function in leaves.js -->  
3.   <!-- Its dimensions and position are defined using its id selector in leaves.css -->  
4.   <div id="leafContainer"></div>  
5.   <!-- its appearance, dimensions, and position are defined using its id selector in leaves.css -->  
6.   <div id="message">  
7.    <em>这是基于webkit的落叶动画</em>  
8.   </div>  
9. </div>  

CSS代码

1. #container {   
2.     position: relative;   
3.     height: 700px;   
4.     width: 500px;   
5.     margin: 10px auto;   
6.     overflow: hidden;   
7.     border: 4px solid #5C090A;   
8.     background: #4E4226 url('images/backgroundLeaves.jpg') no-repeat top left;   
9. }   
10.   
11.   
12. #leafContainer    
13. {   
14.     position: absolute;   
15.     width: 100%;   
16.     height: 100%;   
17. }   
18.   
19.   
20. #message   
21. {   
22.     position: absolute;   
23.     top: 160px;   
24.     width: 100%;   
25.     height: 300px;   
26.     background:transparent url('images/textBackground.png') repeat-x center;   
27.     color: #5C090A;   
28.     font-size: 220%;   
29.     font-family: 'Georgia';   
30.     text-align: center;   
31.     padding: 20px 10px;   
32.     -webkit-box-sizing: border-box;   
33.     -webkit-background-size: 100% 100%;   
34.     z-index: 1;   
35. }   
36.   
37. p {   
38.   margin: 15px;   
39. }   
40.   
41. a   
42. {   
43.   color: #5C090A;   
44.   text-decoration: none;   
45. }   
46.   
47.   
48. em    
49. {   
50.     font-weight: bold;   
51.     font-style: normal;   
52. }   
53.   
54. .phone {   
55.   font-size: 150%;   
56.   vertical-align: middle;   
57. }   
58.   
59.   
60. #leafContainer > div    
61. {   
62.     position: absolute;   
63.     width: 100px;   
64.     height: 100px;   
65.   
66.       
67.     -webkit-animation-iteration-count: infinite, infinite;   
68.     -webkit-animation-direction: normal, normal;   
69.     -webkit-animation-timing-function: linear, ease-in;   
70. }   
71.   
72.   
73. #leafContainer > div > img {   
74.      position: absolute;   
75.      width: 100px;   
76.      height: 100px;   
77.   
78.       
79.      -webkit-animation-iteration-count: infinite;   
80.      -webkit-animation-direction: alternate;   
81.      -webkit-animation-timing-function: ease-in-out;   
82.      -webkit-transform-origin: 50% -100%;   
83. }   
84.   
85.   
86. @-webkit-keyframes fade   
87. {   
88.       
89.     0%   { opacity: 1; }   
90.     95%  { opacity: 1; }   
91.     100% { opacity: 0; }   
92. }   
93.   
94.   
95. @-webkit-keyframes drop   
96. {   
97.       
98.     0%   { -webkit-transform: translate(0px, -50px); }   
99.       
100.     100% { -webkit-transform: translate(0px, 650px); }   
101. }   
102.   
103.   
104. @-webkit-keyframes clockwiseSpin   
105. {   
106.       
107.     0%   { -webkit-transform: rotate(-50deg); }   
108.       
109.     100% { -webkit-transform: rotate(50deg); }   
110. }   
111.   
112.   
113. @-webkit-keyframes counterclockwiseSpinAndFlip    
114. {   
115.       
116.     0%   { -webkit-transform: scale(-1, 1) rotate(50deg); }   
117.       
118.     100% { -webkit-transform: scale(-1, 1) rotate(-50deg); }   
119. }   

JavaScript代码

1.   
2. const NUMBER_OF_LEAVES = 30;   
3.   
4.   
5. function init()   
6. {   
7.       
8.     var container = document.getElementById('leafContainer');   
9.       
10.     for (var i = 0; i < NUMBER_OF_LEAVES; i++)    
11.     {   
12.         container.appendChild(createALeaf());   
13.     }   
14. }   
15.   
16.   
17. function randomInteger(low, high)   
18. {   
19.     return low + Math.floor(Math.random() * (high - low));   
20. }   
21.   
22.   
23. function randomFloat(low, high)   
24. {   
25.     return low + Math.random() * (high - low);   
26. }   
27.   
28.   
29. function pixelValue(value)   
30. {   
31.     return value + 'px';   
32. }   
33.   
34.   
35.   
36. function durationValue(value)   
37. {   
38.     return value + 's';   
39. }   
40.   
41.   
42. function createALeaf()   
43. {   
44.       
45.     var leafDiv = document.createElement('div');   
46.     var image = document.createElement('img');   
47.   
48.       
49.     image.src = 'images/realLeaf' + randomInteger(1, 5) + '.png';   
50.   
51.     leafDiv.style.top = "-100px";   
52.   
53.       
54.     leafDiv.style.left = pixelValue(randomInteger(0, 500));   
55.   
56.       
57.     var spinAnimationName = (Math.random() < 0.5) ? 'clockwiseSpin' : 'counterclockwiseSpinAndFlip';   
58.   
59.       
60.     leafDiv.style.webkitAnimationName = 'fade, drop';   
61.     image.style.webkitAnimationName = spinAnimationName;   
62.   
63.       
64.     var fadeAndDropDuration = durationValue(randomFloat(5, 11));   
65.   
66.       
67.     var spinDuration = durationValue(randomFloat(4, 8));   
68.       
69.     leafDiv.style.webkitAnimationDuration = fadeAndDropDuration + ', ' + fadeAndDropDuration;   
70.   
71.     var leafDelay = durationValue(randomFloat(0, 5));   
72.     leafDiv.style.webkitAnimationDelay = leafDelay + ', ' + leafDelay;   
73.   
74.     image.style.webkitAnimationDuration = spinDuration;   
75.   
76.     // add the <img> to the <div>   
77.     leafDiv.appendChild(image);   
78.   
79.       
80.     return leafDiv;   
81. }   
82.   
83.   
84. window.addEventListener('load', init, false);   

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