投稿
程序员

逼真的HTML5树叶飘落动画

作者：admin 2021-07-16 我要评论

这款HTML5树叶飘落动画是基于webkit内核的，也就是说要在webkit内核的浏览器上才能使用这款动画。 源码下载 演示地址 HTML代码 XML/HTML Code 复制内容到剪贴板 ...

（在说正事之前，我要推荐一个福利：你还在原价购买阿里云、腾讯云、华为云服务器吗？那太亏啦！来这里，新购、升级、续费都打折，能够为您省60%的钱呢！2核4G企业级云服务器低至69元/年，点击进去看看吧>>>)

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

源码下载 演示地址

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.     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.     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(0px, 650px); }   
  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);   

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


原文链接：https://m.jb51.net/html5/435340.html

版权声明：本文转载自网络，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的，如有侵权请联系QQ/微信：153890879删除

相关文章
  • 数智洞察丨和死神赛跑，那些不得不“闯

    数智洞察丨和死神赛跑，那些不得不“闯

  • 酒店小程序开发瑞蚁解决方案

    酒店小程序开发瑞蚁解决方案

  • 自建Kubernetes集群如何使用阿里云CSI

    自建Kubernetes集群如何使用阿里云CSI

  • 【kafka运维】数据迁移、分区副本重分

    【kafka运维】数据迁移、分区副本重分

腾讯云代理商
精彩导读
/images/defaultpic.gif

HTTP协议简介_动力节点Java学院整理

/images/defaultpic.gif

强劲迷你，Safari 14.0 的功臣你不来看

/images/defaultpic.gif

多种语言下获取当前页完整URL及其参数

/images/defaultpic.gif

5个HTML5的常用本地存储方式详解与介绍

/images/defaultpic.gif

Discuz!NT 论坛整合ASP程序论坛

/images/defaultpic.gif

js前端对于大量数据的展示方式及处理方

海外云服务器
热门资讯
腾讯云代理商
备案：湘ICP备15009499号-1
网站简介 投稿须知 商务合作 版权申明 技术支持：TOP云