逼真的HTML5树叶飘落动画


Posted in HTML / CSS onMarch 01, 2016

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

逼真的HTML5树叶飘落动画

源码下载 演示地址

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.     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.   
  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.     positionabsolute;   
  65.     width100px;   
  66.     height100px;   
  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-directionnormalnormal;   
  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.      positionabsolute;   
  83.      width100px;   
  84.      height100px;   
  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.     0%   { opacity: 1; }   
  102.     95%  { opacity: 1; }   
  103.     100% { opacity: 0; }   
  104. }   
  105.   
  106. /* Makes a leaf fall from -300 to 600 pixels in the y-axis */  
  107. @-webkit-keyframes drop   
  108. {   
  109.     /* Move a leaf to -300 pixels in the y-axis at the start of the animation */  
  110.     0%   { -webkit-transform: translate(0px, -50px); }   
  111.     /* Move a leaf to 600 pixels in the y-axis at the end of the animation */  
  112.     100% { -webkit-transform: translate(0px650px); }   
  113. }   
  114.   
  115. /* Rotates a leaf from -50 to 50 degrees in 2D space */  
  116. @-webkit-keyframes clockwiseSpin   
  117. {   
  118.     /* Rotate a leaf by -50 degrees in 2D space at the start of the animation */  
  119.     0%   { -webkit-transform: rotate(-50deg); }   
  120.     /*  Rotate a leaf by 50 degrees in 2D space at the end of the animation */  
  121.     100% { -webkit-transform: rotate(50deg); }   
  122. }   
  123.   
  124. /* Flips a leaf and rotates it from 50 to -50 degrees in 2D space */  
  125. @-webkit-keyframes counterclockwiseSpinAndFlip    
  126. {   
  127.     /* Flip a leaf and rotate it by 50 degrees in 2D space at the start of the animation */  
  128.     0%   { -webkit-transform: scale(-1, 1) rotate(50deg); }   
  129.     /* Flip a leaf and rotate it by -50 degrees in 2D space at the end of the animation */  
  130.     100% { -webkit-transform: scale(-1, 1) rotate(-50deg); }   
  131. }   

JavaScript代码

JavaScript Code复制内容到剪贴板
  1. /* Define the number of leaves to be used in the animation */  
  2. const NUMBER_OF_LEAVES = 30;   
  3.   
  4. /*   
  5.     Called when the "Falling Leaves" page is completely loaded.  
  6. */  
  7. function init()   
  8. {   
  9.     /* Get a reference to the element that will contain the leaves */  
  10.     var container = document.getElementById('leafContainer');   
  11.     /* Fill the empty container with new leaves */  
  12.     for (var i = 0; i < NUMBER_OF_LEAVES; i++)    
  13.     {   
  14.         container.appendChild(createALeaf());   
  15.     }   
  16. }   
  17.   
  18. /*  
  19.     Receives the lowest and highest values of a range and  
  20.     returns a random integer that falls within that range.  
  21. */  
  22. function randomInteger(low, high)   
  23. {   
  24.     return low + Math.floor(Math.random() * (high - low));   
  25. }   
  26.   
  27. /*  
  28.    Receives the lowest and highest values of a range and  
  29.    returns a random float that falls within that range.  
  30. */  
  31. function randomFloat(low, high)   
  32. {   
  33.     return low + Math.random() * (high - low);   
  34. }   
  35.   
  36. /*  
  37.     Receives a number and returns its CSS pixel value.  
  38. */  
  39. function pixelValue(value)   
  40. {   
  41.     return value + 'px';   
  42. }   
  43.   
  44. /*  
  45.     Returns a duration value for the falling animation.  
  46. */  
  47.   
  48. function durationValue(value)   
  49. {   
  50.     return value + 's';   
  51. }   
  52.   
  53. /*  
  54.     Uses an img element to create each leaf. "Leaves.css" implements two spin   
  55.     animations for the leaves: clockwiseSpin and counterclockwiseSpinAndFlip. This  
  56.     function determines which of these spin animations should be applied to each leaf.  
  57.  
  58. */  
  59. function createALeaf()   
  60. {   
  61.     /* Start by creating a wrapper div, and an empty img element */  
  62.     var leafDiv = document.createElement('div');   
  63.     var image = document.createElement('img');   
  64.   
  65.     /* Randomly choose a leaf image and assign it to the newly created element */  
  66.     image.src = 'images/realLeaf' + randomInteger(1, 5) + '.png';   
  67.   
  68.     leafDiv.style.top = "-100px";   
  69.   
  70.     /* Position the leaf at a random location along the screen */  
  71.     leafDiv.style.left = pixelValue(randomInteger(0, 500));   
  72.   
  73.     /* Randomly choose a spin animation */  
  74.     var spinAnimationName = (Math.random() < 0.5) ? 'clockwiseSpin' : 'counterclockwiseSpinAndFlip';   
  75.   
  76.     /* Set the -webkit-animation-name property with these values */  
  77.     leafDiv.style.webkitAnimationName = 'fade, drop';   
  78.     image.style.webkitAnimationName = spinAnimationName;   
  79.   
  80.     /* Figure out a random duration for the fade and drop animations */  
  81.     var fadeAndDropDuration = durationValue(randomFloat(5, 11));   
  82.   
  83.     /* Figure out another random duration for the spin animation */  
  84.     var spinDuration = durationValue(randomFloat(4, 8));   
  85.     /* Set the -webkit-animation-duration property with these values */  
  86.     leafDiv.style.webkitAnimationDuration = fadeAndDropDuration + ', ' + fadeAndDropDuration;   
  87.   
  88.     var leafDelay = durationValue(randomFloat(0, 5));   
  89.     leafDiv.style.webkitAnimationDelay = leafDelay + ', ' + leafDelay;   
  90.   
  91.     image.style.webkitAnimationDuration = spinDuration;   
  92.   
  93.     // add the <img> to the <div>   
  94.     leafDiv.appendChild(image);   
  95.   
  96.     /* Return this img element so it can be added to the document */  
  97.     return leafDiv;   
  98. }   
  99.   
  100. /* Calls the init function when the "Falling Leaves" page is full loaded */  
  101. window.addEventListener('load', init, false);   

以上就是本文的全部内容,希望对大家学习有所帮助。

HTML / CSS 相关文章推荐
css3弹性盒模型实例介绍
May 27 HTML / CSS
HTML5印章绘制电子签章图片(中文英文椭圆章、中文英文椭圆印章)
Jun 03 HTML / CSS
HTML5 Canvas标签使用收录
Jul 07 HTML / CSS
Javascript 高级手势使用介绍
Apr 21 HTML / CSS
HTML5的表单(绝对特别强大的功能)使用示例
Jun 20 HTML / CSS
5个你不知道的HTML5的接口介绍
Aug 07 HTML / CSS
HTML5+CSS3绘制锯齿状的矩形
Mar 01 HTML / CSS
记一次高分屏下canvas模糊问题
Feb 17 HTML / CSS
app内嵌H5 webview 本地缓存问题的解决
Oct 19 HTML / CSS
CSS3 实现的图片悬停的切换按钮
Apr 13 HTML / CSS
HTML中的表单Form实现居中效果
May 25 HTML / CSS
CSS中使用grid布局实现一套模板多种布局
Jul 15 HTML / CSS
HTML5+CSS3绘制锯齿状的矩形
Mar 01 #HTML / CSS
使用HTML5中的contentEditable来将多行文本自动增高
Mar 01 #HTML / CSS
解析HTML5中的新功能本地存储localStorage
Mar 01 #HTML / CSS
基于HTML5的齿轮动画特效
Feb 29 #HTML / CSS
HTML5中meta属性的使用方法
Feb 29 #HTML / CSS
HTML5+lufylegend实现游戏中的卷轴
Feb 29 #HTML / CSS
HTML5实现动画效果的方式汇总
Feb 29 #HTML / CSS
You might like
php 生成唯一id的几种解决方法
2013/03/08 PHP
input file获得文件根目录简单实现
2013/04/26 PHP
php继承中方法重载(覆盖)的应用场合
2015/02/09 PHP
PHP十六进制颜色随机生成器功能示例
2017/07/24 PHP
TP5框架实现的数据库备份功能示例
2020/04/05 PHP
JQuery文本改变触发事件如聚焦事件、失焦事件
2014/01/15 Javascript
extjs 分页使用jsp传递数据示例
2014/07/29 Javascript
javascript实现校验文件上传控件实例
2015/04/20 Javascript
NodeJs读取JSON文件格式化时的注意事项
2016/09/25 NodeJs
在js里怎么实现Xcode里的callFuncN方法(详解)
2016/11/05 Javascript
javascript-解决mongoose数据查询的异步操作
2016/12/22 Javascript
uploader秒传图片到服务器完整代码
2017/04/22 Javascript
nodejs前端自动化构建环境的搭建
2017/07/26 NodeJs
用js屏蔽被http劫持的浮动广告实现方法
2017/08/10 Javascript
JavaScript数组的5种迭代方法
2017/09/29 Javascript
微信小程序使用request网络请求操作实例
2017/12/15 Javascript
详解Webpack + ES6 最新环境搭建与配置
2018/06/04 Javascript
js遍历添加栏目类添加css 再点击其它删除css【推荐】
2018/06/12 Javascript
微信小程序input框中加入小图标的实现方法
2018/06/19 Javascript
Vue 前端实现登陆拦截及axios 拦截器的使用
2019/07/17 Javascript
Vue中的transition封装组件的实现方法
2019/08/13 Javascript
vue-quill-editor 自定义工具栏和自定义图片上传路径操作
2020/08/03 Javascript
Python中urllib2模块的8个使用细节分享
2015/01/01 Python
好用的Python编辑器WingIDE的使用经验总结
2016/08/31 Python
Python反射用法实例简析
2017/12/22 Python
使用Python来开发微信功能
2018/06/13 Python
Windows下将Python文件打包成.EXE可执行文件的方法
2018/08/03 Python
eBay瑞士购物网站:eBay.ch
2018/12/24 全球购物
2014两会学习心得:榜样精神伴我行
2014/03/17 职场文书
党的群众路线教育实践活动个人整改措施范文
2014/11/04 职场文书
企业2014年度工作总结
2014/12/10 职场文书
经理聘任证明
2015/03/02 职场文书
2016年学校爱国卫生月活动总结
2016/04/06 职场文书
Python编程中Python与GIL互斥锁关系作用分析
2021/09/15 Python
详解JavaScript的计时器和按钮效果设置
2022/02/18 Javascript
UNION CREATIVE《Re:从零开始的异世界生活》雷姆手办
2022/03/20 日漫