逼真的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实现复选框动画特效示例代码
Sep 27 HTML / CSS
利用纯CSS3实现动态的自行车特效源码
Jan 20 HTML / CSS
css3实现文字扫光渐变动画效果的示例
Nov 07 HTML / CSS
涂鸦板简单实现 Html5编写属于自己的画画板
Jul 05 HTML / CSS
HTML5混合开发二维码扫描以及调用本地摄像头
Dec 27 HTML / CSS
HTML5和以前HTML4的区别整理
Oct 20 HTML / CSS
HTML5 canvas画图并保存成图片的jcanvas插件
Jan 17 HTML / CSS
html5 更新图片颜色示例代码
Jul 29 HTML / CSS
Web时代变迁及html5与html4的区别
Jan 06 HTML / CSS
一波HTML5 Canvas基础绘图实例代码集合
Feb 28 HTML / CSS
HTML5实现可缩放时钟代码
Aug 28 HTML / CSS
css让页脚保持在底部位置的四种方案
Jul 23 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
linux下删除7天前日志的代码(php+shell)
2011/01/02 PHP
PHP递归返回值时出现的问题解决办法
2013/02/19 PHP
PHP过滤黑名单关键字的方法
2014/12/01 PHP
php将数组转换成csv格式文件输出的方法
2015/03/14 PHP
php 解析xml 的四种方法详细介绍
2016/10/26 PHP
PHP+redis实现的购物车单例类示例
2019/02/02 PHP
解决Laravel自定义类引入和命名空间的问题
2019/10/15 PHP
JavaScript Tips 使用DocumentFragment加快DOM渲染速度
2010/06/28 Javascript
JavaScript中的Array对象使用说明
2011/01/17 Javascript
使用typeof判断function是否存在于上下文
2014/08/14 Javascript
使用ngView配合AngularJS应用实现动画效果的方法
2015/06/19 Javascript
实用jquery操作表单元素的简单代码
2016/07/04 Javascript
JSON与String互转的实现方法(Javascript)
2016/09/27 Javascript
jQuery实现的购物车物品数量加减功能代码
2016/11/16 Javascript
DWR3 访问WEB元素的两种方法实例详解
2017/01/03 Javascript
纯js的右下角弹窗实例
2017/03/12 Javascript
nodejs利用ajax实现网页无刷新上传图片实例代码
2017/06/06 NodeJs
javascript观察者模式实现自动刷新效果
2017/09/05 Javascript
使用 Node.js 模拟滑动拼图验证码操作的示例代码
2017/11/02 Javascript
vuex 多模块时 模块内部的mutation和action的调用方式
2020/07/24 Javascript
Django配置celery(非djcelery)执行异步任务和定时任务
2018/07/16 Python
python跳出双层for循环的解决方法
2019/06/24 Python
Flask框架学习笔记之模板操作实例详解
2019/08/15 Python
python中for循环变量作用域及用法详解
2019/11/05 Python
使用HTML5拍照示例代码
2013/08/06 HTML / CSS
信息管理应届生求职信
2014/03/07 职场文书
手术室护士长竞聘书
2014/03/31 职场文书
汽车广告策划方案
2014/05/31 职场文书
维护民族团结演讲稿
2014/08/27 职场文书
2014年服务员个人工作总结
2014/12/23 职场文书
课外活动实习计划
2015/01/19 职场文书
上市公司财务总监岗位职责
2015/04/03 职场文书
小学语文新课改心得体会
2016/01/22 职场文书
运动会主持人开幕词
2016/03/04 职场文书
golang 比较浮点数的大小方式
2021/05/02 Golang
十大最强水系宝可梦,最美宝可梦排第三,榜首大家最熟悉
2022/03/18 日漫