HTML5树叶飘落动画

请使用Chrome浏览器查看本效果。

技术分享

html源代码:

Html代码  技术分享
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4. <title>HTML5树叶飘落动画-柯乐义</title><base target="_blank" href="http://keleyi.com/keleyi/phtml/css3/" />  
  5. <meta charset="utf-8">  
  6. <meta name="viewport" content="width=500px, initial-scale=0.64">  
  7. <link rel="apple-touch-icon" href="http://keleyi.com/keleyi/phtml/css3/15/images/apple-touch-icon.png" />  
  8. <!-- The leaves.css file animates the leaves -->  
  9. <link rel="stylesheet" href="http://keleyi.com/keleyi/phtml/css3/15/leaves.css" type="text/css" media="screen" charset="utf-8">  
  10. <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.11.2.min.js"></script>  
  11. <!-- The leaves.js file creates the leaves -->  
  12. <script src="http://keleyi.com/keleyi/phtml/css3/15/leaves.js" type="text/javascript" charset="utf-8"></script>  
  13. </head>  
  14. <body>  
  15. <div style="text-align: center; clear: both; margin-top:0px">  
  16. <span id="keleyi">  
  17. <href="http://keleyi.com">首页</a<href="http://keleyi.com/keleyi/phtml/">  
  18. 特效库  
  19. </a<href="http://keleyi.com/a/bjae/h1o76nuh.htm">原文</a> 请使用Chrome浏览器查看本页。  
  20. </span>  
  21. </div>  
  22. <div id="container">  
  23. <!-- The container is dynamically populated using the init function in leaves.js -->  
  24. <!-- Its dimensions and position are defined using its id selector in leaves.css -->  
  25. <div id="leafContainer"></div>  
  26. <!-- its appearance, dimensions, and position are defined using its id selector in leaves.css -->  
  27. <div id="message">  
  28. <em>落红不是无情物</em>  
  29. </div>  
  30. </div>  
  31. </body>  
  32. </html>  

 转载自:http://keleyi.com/a/bjae/h1o76nuh.htm

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。