逼真的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. /* Defines the position and dimensions of the leafContainer div */  
12. #leafContainer    
13. {   
14.     position: absolute;   
15.     width: 100%;   
16.     height: 100%;   
17. }   
18.   
19. /* Defines the appearance, position, and dimensions of the message div */  
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: '