查看效果：http://keleyi.com/keleyi/phtml/css3/15.htm
请使用Chrome浏览器查看本效果。
html源代码：
<!DOCTYPE HTML> <html> <head> <title>HTML5树叶飘落动画-柯乐义</title><base target="_blank" href="http://keleyi.com/keleyi/phtml/css3/" /> <meta charset="utf-8"> <meta name="viewport" content="width=500px, initial-scale=0.64"> <link rel="apple-touch-icon" href="http://keleyi.com/keleyi/phtml/css3/15/images/apple-touch-icon.png" /> <!-- The leaves.css file animates the leaves --> <link rel="stylesheet" href="http://keleyi.com/keleyi/phtml/css3/15/leaves.css" type="text/css" media="screen" charset="utf-8"> <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.11.2.min.js"></script> <!-- The leaves.js file creates the leaves --> <script src="http://keleyi.com/keleyi/phtml/css3/15/leaves.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div style="text-align: center; clear: both; margin-top:0px"> <span id="keleyi"> <a href="http://keleyi.com">首页</a> <a href="http://keleyi.com/keleyi/phtml/"> 特效库 </a> <a href="http://keleyi.com/a/bjae/h1o76nuh.htm">原文</a> 请使用Chrome浏览器查看本页。 </span> </div> <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>落红不是无情物</em> </div> </div> </body> </html>
?转载自：http://keleyi.com/a/bjae/h1o76nuh.htm
特效：
http://ini.iteye.com/blog/2165698
http://ini.iteye.com/blog/2163592
原文：http://ini.iteye.com/blog/2176371