怎么用HTML5實(shí)現(xiàn)樹葉飄落動畫

本篇內(nèi)容主要講解“怎么用HTML5實(shí)現(xiàn)樹葉飄落動畫”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“怎么用HTML5實(shí)現(xiàn)樹葉飄落動畫”吧!

成都創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比崆峒網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式崆峒網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋崆峒地區(qū)。費(fèi)用合理售后完善，十年實(shí)體公司更值得信賴。

這款HTML5樹葉飄落動畫是基于webkit內(nèi)核的，也就是說要在webkit內(nèi)核的瀏覽器上才能使用這款動畫。

怎么用HTML5實(shí)現(xiàn)樹葉飄落動畫

源碼下載演示地址

HTML代碼

XML/HTML Code復(fù)制內(nèi)容到剪貼板

  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復(fù)制內(nèi)容到剪貼板

  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復(fù)制內(nèi)容到剪貼板

  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);   

到此，相信大家對“怎么用HTML5實(shí)現(xiàn)樹葉飄落動畫”有了更深的了解，不妨來實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

本文名稱：怎么用HTML5實(shí)現(xiàn)樹葉飄落動畫
分享URL：http://muchs.cn/article8/ighpop.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)、定制開發(fā)、網(wǎng)站改版、網(wǎng)站營銷、Google、搜索引擎優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

h5響應(yīng)式網(wǎng)站建設(shè)