查看效果：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>