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

逼真的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.     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   
  21. {   
  22.     position: absolute;   
  23.     top: 160px;   
  24.     width: 100%;   
  25.     height: 300px;   
  26.     background:transparent url('images/textBackground.png') repeat-x center;   
  27.     color: #5C090A;   
  28.     font-size: 220%;   
  29.     font-family: 'Georgia';   
  30.     text-align: center;   
  31.     padding: 20px 10px;   
  32.     -webkit-box-sizing: border-box;   
  33.     -webkit-background-size: 100% 100%;   
  34.     z-index: 1;   
  35. }   
  36.   
  37. p {   
  38.   margin: 15px;   
  39. }   
  40.   
  41. a   
  42. {   
  43.   color: #5C090A;   
  44.   text-decoration: none;   
  45. }   
  46.   
  47. /* Sets the color of the "Dino's Gardening Service" message */  
  48. em    
  49. {   
  50.     font-weight: bold;   
  51.     font-style: normal;   
  52. }   
  53.   
  54. .phone {   
  55.   font-size: 150%;   
  56.   vertical-align: middle;   
  57. }   
  58.   

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网