逼真的HTML5树叶飘落动画

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

源码下载 演示地址

HTML代码

XML/HTML Code复制内容到剪贴板

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

CSS代码

CSS Code复制内容到剪贴板

#container {   
    position: relative;   
    height: 700px;   
    width: 500px;   
    margin: 10px auto;   
    overflow: hidden;   
    border: 4px solid #5C090A;   
    background: #4E4226 url(‘images/backgroundLeaves.jpg’) no-repeat top left;   
}   
  
/* Defines the position and dimensions of the leafContainer div */  
#leafContainer    
{   
    position: absolute;   
    width: 100%;   
    height: 100%;   
}   
  
/* Defines the appearance, position, and dimensions of the message div */  
#message   
{   
    position: absolute;   
    top: 160px;   
    width: 100%;   
    height: 300px;   
    background:transparent url(‘images/textBackground.png’) repeat-x center;   
    color: #5C090A;