您现在的位置是:网站首页> 编程资料编程资料

逼真的HTML5树叶飘落动画html5结合Canvas实现的树叶飘落动画特效源码HTML5实现的树叶飘落动画特效源码基于HTML5+Webkit实现树叶飘落动画

2023-10-14 449人已围观

简介 这篇文章主要为大家详细介绍了一款逼真的HTML5树叶飘落动画,树叶飘落的动画效果非常真实,树叶都是图片,并非CSS3绘制,感兴趣的小伙伴们可以参考一下

这款HTML5树叶飘落动画是基于webkit内核的,也就是说要在webkit内核的浏览器上才能使用这款动画。

源码下载演示地址

HTML代码

XML/HTML Code复制内容到剪贴板
  1. <div id="container">  
  2.     
  3.     
  4.   <div id="leafContainer">div>  
  5.     
  6.   <div id="message">  
  7.    <em>这是基于webkit的落叶动画em>  
  8.   div>  
  9. div>  

CSS代码

CSS Code复制内容到剪贴板
  1. #container {   
  2.     positionrelative;   
  3.     height700px;   
  4.     width500px;   
  5.     margin10px auto;   
  6.     overflowhidden;   
  7.     border4px 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.     positionabsolute;   
  15.     width: 100%;   
  16.     height: 100%;   
  17. }   
  18.   
  19. /* Defines the appearance, position, and dimensions of the message div */  
  20. #message   
  21. {   
  22.     positionabsolute;   
  23.     top160px;   
  24.     width: 100%;   
  25.     height300px;   
  26.     background:transparent url('images/textBackground.png'repeat-x center;   
  27.     color#5C090A;   
  28.     font-size: 220%;   
  29.     font-family'Georgia';   
  30.     text-aligncenter;   
  31.     padding20px 10px;   
  32.     -webkit-box-sizing: border-box;   
  33.     -webkit-background-size: 100% 100%;   
  34.     z-index: 1;   
  35. }   
  36.   
  37. p {   
  38.   margin15px;   
  39. }   
  40.   
  41. a   
  42. {   
  43.   color#5C090A;   
  44.   text-decorationnone;   
  45. }   
  46.   
  47. /* Sets the color of the "Dino's Gardening Service" message */  
  48. em    
  49. {   
  50.     font-weightbold;   
  51.     font-stylenormal;   
  52. }   
  53.   
  54. .phone {   
  55.   font-size: 150%;   
  56.   vertical-alignmiddle;   
  57. }   
  58.   
-六神源码网