逼真的HTML5树叶飘落动画

网络
梦是一种欲望，想是一种行动。梦想是梦与想的结晶。当心灵趋于平静时，精神便是永恒！把欲望降到最低点，把理性升华到最高点，你会感受到：平安是福，清新是禄，寡欲是寿！

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

源码下载 演示地址

HTML代码

XML/HTML Code复制内容到剪贴板
  1. <divid="container">
  2. <!--Thecontainerisdynamicallypopulatedusingtheinitfunctioninleaves.js-->
  3. <!--Itsdimensionsandpositionaredefinedusingitsidselectorinleaves.css-->
  4. <divid="leafContainer"></div>
  5. <!--itsappearance,dimensions,andpositionaredefinedusingitsidselectorinleaves.css-->
  6. <divid="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:10pxauto;
  6. overflow:hidden;
  7. border:4pxsolid#5C090A;
  8. background:#4E4226url('images/backgroundLeaves.jpg')no-repeattopleft;
  9. }
  11. /*DefinesthepositionanddimensionsoftheleafContainerdiv*/
  12. #leafContainer
  13. {
  14. position:absolute;
  15. width:100%;
  16. height:100%;
  17. }
  19. /*Definestheappearance,position,anddimensionsofthemessagediv*/
  20. #message
  21. {
  22. position:absolute;
  23. top:160px;
  24. width:100%;
  25. height:300px;
  26. background:transparenturl('images/textBackground.png')repeat-xcenter;
  27. color:#5C090A;
  28. font-size:220%;
  29. font-family:'Georgia';
  30. text-align:center;
  31. padding:20px10px;
  32. -webkit-box-sizing:border-box;
  33. -webkit-background-size:100%100%;
  34. z-index:1;
  35. }
  37. p{
  38. margin:15px;
  39. }
  41. a
  42. {
  43. color:#5C090A;
  44. text-decoration:none;
  45. }
  47. /*Setsthecolorofthe"Dino'sGardeningService"message*/
  48. em
  49. {
  50. font-weight:bold;
  51. font-style:normal;
  52. }
  54. .phone{
  55. font-size:150%;
  56. vertical-align:middle;
  57. }
  59. /*ThisCSSruleisappliedtoalldivelementsintheleafContainerdiv.
  60. ItstylesandanimateseachleafDiv.
  61. */
  62. #leafContainer>div
  63. {
  64. position:absolute;
  65. width:100px;
  66. height:100px;
  68. /*Weusethefollowingpropertiestoapplythefadeanddropanimationstoeachleaf.
  69. Eachofthesepropertiestakestwovalues.Thesevaluesrespectivelymatchasetting
  70. forfadeanddrop.
  71. */
  72. -webkit-animation-iteration-count:infinite,infinite;
  73. -webkit-animation-direction:normal,normal;
  74. -webkit-animation-timing-function:linear,ease-in;
  75. }
  77. /*ThisCSSruleisappliedtoallimgelementsdirectlyinsidedivelementswhichare
  78. directlyinsidetheleafContainerdiv.Inotherwords,itmatchesthe'img'elements
  79. insidetheleafDivswhicharecreatedinthecreateALeaf()function.
  80. */
  81. #leafContainer>div>img{
  82. position:absolute;
  83. width:100px;
  84. height:100px;
  86. /*WeusethefollowingpropertiestoadjusttheclockwiseSpinorcounterclockwiseSpinAndFlip
  87. animationsoneachleaf.
  88. ThecreateALeaffunctionintheLeaves.jsfiledetermineswhetheraleafhasthe
  89. clockwiseSpinorcounterclockwiseSpinAndFlipanimation.
  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. }
  97. /*Hidesaleaftowardstheveryendoftheanimation*/
  98. @-webkit-keyframesfade
  99. {
  100. /*Showaleafwhileintoorbelow95percentoftheanimationandhideit,otherwise*/
  101. 0%{opacity:1;}
  102. 95%{opacity:1;}
  103. 100%{opacity:0;}
  104. }
  106. /*Makesaleaffallfrom-300to600pixelsinthey-axis*/
  107. @-webkit-keyframesdrop
  108. {
  109. /*Movealeafto-300pixelsinthey-axisatthestartoftheanimation*/
  110. 0%{-webkit-transform:translate(0px,-50px);}
  111. /*Movealeafto600pixelsinthey-axisattheendoftheanimation*/
  112. 100%{-webkit-transform:translate(0px,650px);}
  113. }
  115. /*Rotatesaleaffrom-50to50degreesin2Dspace*/
  116. @-webkit-keyframesclockwiseSpin
  117. {
  118. /*Rotatealeafby-50degreesin2Dspaceatthestartoftheanimation*/
  119. 0%{-webkit-transform:rotate(-50deg);}
  120. /*Rotatealeafby50degreesin2Dspaceattheendoftheanimation*/
  121. 100%{-webkit-transform:rotate(50deg);}
  122. }
  124. /*Flipsaleafandrotatesitfrom50to-50degreesin2Dspace*/
  125. @-webkit-keyframescounterclockwiseSpinAndFlip
  126. {
  127. /*Flipaleafandrotateitby50degreesin2Dspaceatthestartoftheanimation*/
  128. 0%{-webkit-transform:scale(-1,1)rotate(50deg);}
  129. /*Flipaleafandrotateitby-50degreesin2Dspaceattheendoftheanimation*/
  130. 100%{-webkit-transform:scale(-1,1)rotate(-50deg);}
  131. }

JavaScript代码

JavaScript Code复制内容到剪贴板
  1. /*Definethenumberofleavestobeusedintheanimation*/
  2. constNUMBER_OF_LEAVES=30;
  4. /*
  5. Calledwhenthe"FallingLeaves"pageiscompletelyloaded.
  6. */
  7. functioninit()
  8. {
  9. /*Getareferencetotheelementthatwillcontaintheleaves*/
  10. varcontainer=document.getElementById('leafContainer');
  11. /*Filltheemptycontainerwithnewleaves*/
  12. for(vari=0;i<NUMBER_OF_LEAVES;i++)
  13. {
  14. container.appendChild(createALeaf());
  15. }
  16. }
  18. /*
  19. Receivesthelowestandhighestvaluesofarangeand
  20. returnsarandomintegerthatfallswithinthatrange.
  21. */
  22. functionrandomInteger(low,high)
  23. {
  24. returnlow+Math.floor(Math.random()*(high-low));
  25. }
  27. /*
  28. Receivesthelowestandhighestvaluesofarangeand
  29. returnsarandomfloatthatfallswithinthatrange.
  30. */
  31. functionrandomFloat(low,high)
  32. {
  33. returnlow+Math.random()*(high-low);
  34. }
  36. /*
  37. ReceivesanumberandreturnsitsCSSpixelvalue.
  38. */
  39. functionpixelValue(value)
  40. {
  41. returnvalue+'px';
  42. }
  44. /*
  45. Returnsadurationvalueforthefallinganimation.
  46. */
  48. functiondurationValue(value)
  49. {
  50. returnvalue+'s';
  51. }
  53. /*
  54. Usesanimgelementtocreateeachleaf."Leaves.css"implementstwospin
  55. animationsfortheleaves:clockwiseSpinandcounterclockwiseSpinAndFlip.This
  56. functiondetermineswhichofthesespinanimationsshouldbeappliedtoeachleaf.
  58. */
  59. functioncreateALeaf()
  60. {
  61. /*Startbycreatingawrapperdiv,andanemptyimgelement*/
  62. varleafDiv=document.createElement('div');
  63. varimage=document.createElement('img');
  65. /*Randomlychoosealeafimageandassignittothenewlycreatedelement*/
  66. image.src='images/realLeaf'+randomInteger(1,5)+'.png';
  68. leafDiv.style.top="-100px";
  70. /*Positiontheleafatarandomlocationalongthescreen*/
  71. leafDiv.style.left=pixelValue(randomInteger(0,500));
  73. /*Randomlychooseaspinanimation*/
  74. varspinAnimationName=(Math.random()<0.5)?'clockwiseSpin':'counterclockwiseSpinAndFlip';
  76. /*Setthe-webkit-animation-namepropertywiththesevalues*/
  77. leafDiv.style.webkitAnimationName='fade,drop';
  78. image.style.webkitAnimationName=spinAnimationName;
  80. /*Figureoutarandomdurationforthefadeanddropanimations*/
  81. varfadeAndDropDuration=durationValue(randomFloat(5,11));
  83. /*Figureoutanotherrandomdurationforthespinanimation*/
  84. varspinDuration=durationValue(randomFloat(4,8));
  85. /*Setthe-webkit-animation-durationpropertywiththesevalues*/
  86. leafDiv.style.webkitAnimationDuration=fadeAndDropDuration+','+fadeAndDropDuration;
  88. varleafDelay=durationValue(randomFloat(0,5));
  89. leafDiv.style.webkitAnimationDelay=leafDelay+','+leafDelay;
  91. image.style.webkitAnimationDuration=spinDuration;
  93. //addthe<img>tothe<div>
  94. leafDiv.appendChild(image);
  96. /*Returnthisimgelementsoitcanbeaddedtothedocument*/
  97. returnleafDiv;
  98. }
  100. /*Callstheinitfunctionwhenthe"FallingLeaves"pageisfullloaded*/
  101. window.addEventListener('load',init,false);

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