jQuery+CSS3实现树叶飘落特效

  请使用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">

  请使用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>

  非常适合个人主页或者博客的一个特效,喜欢此特效的小伙伴直接拿走吧,自由扩展下也可以哦。