最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

逼真的HTML5树叶飘落动画_html5教程技巧-H5教程

来源:http://erdangjiade.com/topic/134623.html H5程序员 2017-10-19 10:30浏览(225)

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

源码下载 演示地址

HTML代码

XML/HTML Code复制内容到剪贴板

  1. <p 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. <p id="leafContainer"></p>
  5. <!-- its appearance, dimensions, and position are defined using its id selector in leaves.css -->
  6. <p id="message">
  7. <em>这是基于webkit的落叶动画</em>
  8. </p>
  9. </p>

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. /* Defines the position and dimensions of the leafContainer p */
  11. #leafContainer
  12. {
  13. position: absolute;
  14. width: 100%;
  15. height: 100%;
  16. }
  17. /* Defines the appearance, position, and dimensions of the message p */
  18. #message
  19. {
  20. position: absolute;
  21. top: 160px;
  22. width: 100%;
  23. height: 300px;
  24. background:transparent url('images/textBackground.png') repeat-x center;
  25. color: #5C090A;
  26. font-size: 220%;
  27. font-family: 'Georgia';
  28. text-align: center;
  29. padding: 20px 10px;
  30. -webkit-box-sizing: border-box;
  31. -webkit-background-size: 100% 100%;
  32. z-index: 1;
  33. }
  34. p {
  35. margin: 15px;
  36. }
  37. a
  38. {
  39. color: #5C090A;
  40. text-decoration: none;
  41. }
  42. /* Sets the color of the "Dino's Gardening Service" message */
  43. em
  44. {
  45. font-weight: bold;
  46. font-style: normal;
  47. }
  48. .phone {
  49. font-size: 150%;
  50. vertical-align: middle;
  51. }
  52. /* This CSS rule is applied to all p elements in the leafContainer p.
  53. It styles and animates each leafDiv.
  54. */
  55. #leafContainer > p
  56. {
  57. position: absolute;
  58. width: 100px;
  59. height: 100px;
  60. /* We use the following properties to apply the fade and drop animations to each leaf.
  61. Each of these properties takes two values. These values respectively match a setting
  62. for fade and drop.
  63. */
  64. -webkit-animation-iteration-count: infinite, infinite;
  65. -webkit-animation-direction: normal, normal;
  66. -webkit-animation-timing-function: linear, ease-in;
  67. }
  68. /* This CSS rule is applied to all img elements directly inside p elements which are
  69. directly inside the leafContainer p. In other words, it matches the 'img' elements
  70. inside the leafDivs which are created in the createALeaf() function.
  71. */
  72. #leafContainer > p > img {
  73. position: absolute;
  74. width: 100px;
  75. height: 100px;
  76. /* We use the following properties to adjust the clockwiseSpin or counterclockwiseSpinAndFlip
  77. animations on each leaf.
  78. The createALeaf function in the Leaves.js file determines whether a leaf has the
  79. clockwiseSpin or counterclockwiseSpinAndFlip animation.
  80. */
  81. -webkit-animation-iteration-count: infinite;
  82. -webkit-animation-direction: alternate;
  83. -webkit-animation-timing-function: ease-in-out;
  84. -webkit-transform-origin: 50% -100%;
  85. }
  86. /* Hides a leaf towards the very end of the animation */
  87. @-webkit-keyframes fade
  88. {
  89. /* Show a leaf while into or below 95 percent of the animation and hide it, otherwise */
  90. 0% { opacity: 1; }
  91. 95% { opacity: 1; }
  92. 100% { opacity: 0; }
  93. }
  94. /* Makes a leaf fall from -300 to 600 pixels in the y-axis */
  95. @-webkit-keyframes drop
  96. {
  97. /* Move a leaf to -300 pixels in the y-axis at the start of the animation */
  98. 0% { -webkit-transform: translate(0px, -50px); }
  99. /* Move a leaf to 600 pixels in the y-axis at the end of the animation */
  100. 100% { -webkit-transform: translate(0px, 650px); }
  101. }
  102. /* Rotates a leaf from -50 to 50 degrees in 2D space */
  103. @-webkit-keyframes clockwiseSpin
  104. {
  105. /* Rotate a leaf by -50 degrees in 2D space at the start of the animation */
  106. 0% { -webkit-transform: rotate(-50deg); }
  107. /* Rotate a leaf by 50 degrees in 2D space at the end of the animation */
  108. 100% { -webkit-transform: rotate(50deg); }
  109. }
  110. /* Flips a leaf and rotates it from 50 to -50 degrees in 2D space */
  111. @-webkit-keyframes counterclockwiseSpinAndFlip
  112. {
  113. /* Flip a leaf and rotate it by 50 degrees in 2D space at the start of the animation */
  114. 0% { -webkit-transform: scale(-1, 1) rotate(50deg); }
  115. /* Flip a leaf and rotate it by -50 degrees in 2D space at the end of the animation */
  116. 100% { -webkit-transform: scale(-1, 1) rotate(-50deg); }
  117. }

JavaScript代码

JavaScript Code复制内容到剪贴板

  1. /* Define the number of leaves to be used in the animation */
  2. const NUMBER_OF_LEAVES = 30;
  3. /*
  4. Called when the "Falling Leaves" page is completely loaded.
  5. */
  6. function init()
  7. {
  8. /* Get a reference to the element that will contain the leaves */
  9. var container = document.getElementById('leafContainer');
  10. /* Fill the empty container with new leaves */
  11. for (var i = 0; i < NUMBER_OF_LEAVES; i++)
  12. {
  13. container.appendChild(createALeaf());
  14. }
  15. }
  16. /*
  17. Receives the lowest and highest values of a range and
  18. returns a random integer that falls within that range.
  19. */
  20. function randomInteger(low, high)
  21. {
  22. return low + Math.floor(Math.random() * (high - low));
  23. }
  24. /*
  25. Receives the lowest and highest values of a range and
  26. returns a random float that falls within that range.
  27. */
  28. function randomFloat(low, high)
  29. {
  30. return low + Math.random() * (high - low);
  31. }
  32. /*
  33. Receives a number and returns its CSS pixel value.
  34. */
  35. function pixelValue(value)
  36. {
  37. return value + 'px';
  38. }
  39. /*
  40. Returns a duration value for the falling animation.
  41. */
  42. function durationValue(value)
  43. {
  44. return value + 's';
  45. }
  46. /*
  47. Uses an img element to create each leaf. "Leaves.css" implements two spin
  48. animations for the leaves: clockwiseSpin and counterclockwiseSpinAndFlip. This
  49. function determines which of these spin animations should be applied to each leaf.
  50. */
  51. function createALeaf()
  52. {
  53. /* Start by creating a wrapper p, and an empty img element */
  54. var leafDiv = document.createElement('p');
  55. var image = document.createElement('img');
  56. /* Randomly choose a leaf image and assign it to the newly created element */
  57. image.src = 'images/realLeaf' + randomInteger(1, 5) + '.png';
  58. leafDiv.style.top = "-100px";
  59. /* Position the leaf at a random location along the screen */
  60. leafDiv.style.left = pixelValue(randomInteger(0, 500));
  61. /* Randomly choose a spin animation */
  62. var spinAnimationName = (Math.random() < 0.5) ? 'clockwiseSpin' : 'counterclockwiseSpinAndFlip';
  63. /* Set the -webkit-animation-name property with these values */
  64. leafDiv.style.webkitAnimationName = 'fade, drop';
  65. image.style.webkitAnimationName = spinAnimationName;
  66. /* Figure out a random duration for the fade and drop animations */
  67. var fadeAndDropDuration = durationValue(randomFloat(5, 11));
  68. /* Figure out another random duration for the spin animation */
  69. var spinDuration = durationValue(randomFloat(4, 8));
  70. /* Set the -webkit-animation-duration property with these values */
  71. leafDiv.style.webkitAnimationDuration = fadeAndDropDuration + ', ' + fadeAndDropDuration;
  72. var leafDelay = durationValue(randomFloat(0, 5));
  73. leafDiv.style.webkitAnimationDelay = leafDelay + ', ' + leafDelay;
  74. image.style.webkitAnimationDuration = spinDuration;
  75. // add the <img> to the <p>
  76. leafDiv.appendChild(image);
  77. /* Return this img element so it can be added to the document */
  78. return leafDiv;
  79. }
  80. /* Calls the init function when the "Falling Leaves" page is full loaded */
  81. window.addEventListener('load', init, false);

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

评论0
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

1 2