逼真的逼真的HTML5树叶飘落动画树叶飘落动画
主要为大家详细介绍了一款逼真的HTML5树叶飘落动画,树叶飘落的动画效果非常真实,树叶都是图片,并非
CSS3绘制,感兴趣的小伙伴们可以参考一下
这款HTML5树叶飘落动画是基于webkit内核的,也就是说要在webkit内核的浏览器上才能使用这款动画。
源码下载源码下载 演示地址演示地址
HTML代码
XML/HTML Code复制内容到剪贴板
1. <div id="container">
2. <!-- The container is dynamically populated using the init function in leaves.js -->
3. <!-- Its dimensions and position are defined using its id selector in leaves.css -->
4. <div id="leafContainer"></div>
5. <!-- its appearance, dimensions, and position are defined using its id selector in leaves.css -->
6. <div id="message">
7. <em>这是基于webkit的落叶动画</em>
8. </div>
9. </div>
CSS代码
CSS Code复制内容到剪贴板
1. #container {
2. position: relative;
3. height: 700px;
4. width: 500px;
5. margin: 10px auto;
6. overflow: hidden;
7. border: 4px solid #5C090A;
8. background: #4E4226 url('images/backgroundLeaves.jpg') no-repeat top left;
9. }
10.
11. /* Defines the position and dimensions of the leafContainer div */
12. #leafContainer
13. {
14. position: absolute;
15. width: 100%;
16. height: 100%;
17. }
18.
19. /* Defines the appearance, position, and dimensions of the message div */
20. #message