逼真的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 3D立方体效果示例-transform也不过如此
Dec 05 HTML / CSS
使用CSS3的rem属性制作响应式页面布局的要点解析
May 24 HTML / CSS
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
Aug 15 HTML / CSS
利用CSS3实现开门效果实例源码
Aug 22 HTML / CSS
纯CSS3+DIV实现小三角形边框效果的示例代码
Aug 03 HTML / CSS
html5 canvas 简单画板实现代码
Jan 05 HTML / CSS
在HTML5 Canvas中放入图片和保存为图片的方法
May 03 HTML / CSS
HTML5 video播放器全屏(fullScreen)方法实例
Apr 24 HTML / CSS
用HTML5制作数字时钟的教程
May 11 HTML / CSS
浅谈关于html5中图片抛物线运动的一些心得
Jan 09 HTML / CSS
html5 横向滑动导航栏的方法示例
May 08 HTML / CSS
为什么你写的height:100%不起作用
May 10 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 mysql Errcode: 28 终极解决方法
2009/07/01 PHP
php 团购折扣计算公式
2011/11/24 PHP
PHP通过文件保存和更新信息的方法分析
2019/09/12 PHP
[原创]用javascript实现检测指定目录是否存在的方法
2008/01/12 Javascript
myEvent.js javascript跨浏览器事件框架
2011/10/24 Javascript
javascript学习笔记(五)原型和原型链详解
2014/10/08 Javascript
node.js中的fs.ftruncate方法使用说明
2014/12/15 Javascript
深入解析Backbone.js框架的依赖库Underscore.js的作用
2016/05/07 Javascript
jQuery插件formValidator实现表单验证
2016/05/23 Javascript
jQuery表单事件实例代码分享
2016/08/18 Javascript
解析javascript图片懒加载与预加载的分析总结
2016/10/27 Javascript
详解JS对象封装的常用方式
2016/12/30 Javascript
js实现图片左右滚动效果
2017/02/27 Javascript
微信小程序 判断手机号的实现代码
2017/04/19 Javascript
Angular实现的日程表功能【可添加及隐藏显示内容】
2017/12/27 Javascript
vuex 的简单使用
2018/03/22 Javascript
node+multer实现图片上传的示例代码
2020/02/18 Javascript
[03:14]2014DOTA2西雅图国际邀请赛 EG战队巡礼
2014/07/07 DOTA
利用Python自带PIL库扩展图片大小给图片加文字描述的方法示例
2017/08/08 Python
Python矩阵常见运算操作实例总结
2017/09/29 Python
python使用Apriori算法进行关联性解析
2017/12/21 Python
详解Python安装scrapy的正确姿势
2018/06/26 Python
python+ffmpeg批量去视频开头的方法
2019/01/09 Python
python中使用ctypes调用so传参设置遇到的问题及解决方法
2019/06/19 Python
Matplotlib 绘制饼图解决文字重叠的方法
2020/07/24 Python
Python绘图实现台风路径可视化代码实例
2020/10/23 Python
python 监控服务器是否有人远程登录(详细思路+代码)
2020/12/18 Python
印尼旅游网站:via
2017/11/12 全球购物
Converse匡威法国官网:美国著名帆布鞋品牌
2018/12/05 全球购物
教师自我鉴定
2013/12/13 职场文书
企业职业病防治方案
2014/05/29 职场文书
中共广东省委常委会党的群众路线教育实践活动整改方案
2014/09/23 职场文书
普通党员四风问题对照检查材料
2014/09/27 职场文书
皇城相府导游词
2015/02/06 职场文书
《乌鸦喝水》教学反思
2016/02/19 职场文书
Python编程根据字典列表相同键的值进行合并
2021/10/05 Python