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

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

2021-08-31 1250人已围观

简介 这篇文章主要为大家详细介绍了一款逼真的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.   
  59. /* This CSS rule is applied to all div elements in the leafContainer div.  
  60.    It styles and animates each leafDiv.  
  61. */  
  62. #leafContainer > div    
  63. {   
  64.     position: absolute;   
  65.     width: 100px;   
  66.     height: 100px;   
  67.   
  68.     /* We use the following properties to apply the fade and drop animations to each leaf.  
  69.        Each of these properties takes two values. These values respectively match a setting  
  70.        for fade and drop.  
  71.     */  
  72.     -webkit-animation-iteration-count: infinite, infinite;   
  73.     -webkit-animation-direction: normal, normal;   
  74.     -webkit-animation-timing-function: linear, ease-in;   
  75. }   
  76.   
  77. /* This CSS rule is applied to all img elements directly inside div elements which are  
  78.    directly inside the leafContainer div. In other words, it matches the 'img' elements  
  79.    inside the leafDivs which are created in the createALeaf() function.  
  80. */  
  81. #leafContainer > div > img {   
  82.      position: absolute;   
  83.      width: 100px;   
  84.      height: 100px;   
  85.   
  86.     /* We use the following properties to adjust the clockwiseSpin or counterclockwiseSpinAndFlip  
  87.        animations on each leaf.  
  88.        The createALeaf function in the Leaves.js file determines whether a leaf has the   
  89.        clockwiseSpin or counterclockwiseSpinAndFlip animation.  
  90.     */  
  91.      -webkit-animation-iteration-count: infinite;   
  92.      -webkit-animation-direction: alternate;   
  93.      -webkit-animation-timing-function: ease-in-out;   
  94.      -webkit-transform-origin: 50% -100%;   
  95. }   
  96.   
  97. /* Hides a leaf towards the very end of the animation */  
  98. @-webkit-keyframes fade   
  99. {   
  100.     /* Show a leaf while into or below 95 percent of the animation and hide it, otherwise */  
  101.    

    上一篇：HTML5+CSS3绘制锯齿状的矩形纯css3绘制的小黄人头像动画特效源码纯css3绘制的QQ企鹅动画特效源码纯css3绘制的精美购物优惠券样式效果源码纯css3绘制的哆啦a梦机器猫头像效果源码CSS3绘制不规则图形的一些方法示例使用HTML和CSS3绘制基本卡通图案的示例分享CSS3绘制圆角矩形的简单示例使用CSS3来绘制一个月食图案用CSS3绘制三角形的简单方法纯CSS3绘制打火机动画火焰效果

    下一篇：多视角3D可旋转的HTML5 Logo动画HTML5 canvas实现雪花飘落特效HTML5实现波浪滚动起伏动画特效源码HTML5+SVG实现盒子爆炸动画特效源码 HTML5+Canvas实现日期圆形时钟特效源码HTML5实现多视角3D逼真水波动画 多视角3D逼真HTML5水波动画 HTML5的新特性(1) HTML5 Canvas实现烟花绽放特效HTML5实现Notification API桌面通知功能 html5+css3进度条倒计时动画特效代码【推荐】

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网