这款HT ML 5树叶飘落动画是基于 webkit 内核的，也就是说要在webk IT 内核的浏览器上才能使用这款动画。
源码下载 演示地址
HTML代码
XM L/HTML Code 复制内容到剪贴板
< div &nbs p; id = "cont ai ner" > <!-- The container is dyn am ical ly populated using the init function in leaves.js --> <!-- Its dimensions and position are define d using its id selector in leaves.css --> < div id = "lea fc ontainer" > </ div > <!-- its ap PE arance, dimensions, and position are defined using its id selector in leaves.css --> < div id = " ;m essage" > < em > 这是基于webkit的落叶动画 </ em > </ div > </ div >
CSS代码
CSS Code 复制内容到剪贴板
# contai ner { position : relative ; h ei ght : 700px ; width : 500px ; m arg in : 10px auto ; overflow : hidden ; border : 4px solid #5C090A ; background : #4E4226 url ( 'images/backgroundLeaves. jpg ' ) no-repeat top left ; } /* Defines the position and dimensions of the leafContainer div */ #leafCo ntainer { position : absolute ; width : 100%; height : 100%; } /* Defines the appearance, position, and dimensions of the message div */ #messag e { position : absolute ; top : 160px ; width : 100%; height : 300px ; background : transparent url ( 'images/textBackground.png' ) repeat -x center ; color : #5C090A ; font -s ize : 220%; font-f ami ly : 'Ge org ia' ; text-align : center ; padding : 20px 10px ; -webkit-box-sizing: border -box; -webkit- background - size : 100% 100%; z -i ndex : 1; } p { mar gin : 15px ; } a { color : #5C090A ; text-decoration : none ; } /* Sets the color of the "Dino's Gardening Service" message */ em { font-weight : bold ; font-style : normal ; } .phone { font-size : 150%; vertical-align : middle ; } /* This CSS rule is applied to all div elements in the leafContainer div. It styles and ani MATE s each leafDiv. */ #leafCo ntainer > div { position : absolute ; width : 100px ; height : 100px ; /* We use the following PR operties to apply the fade and drop animations to each leaf. Each of these properties takes two values. These values respectively match a setting for fade and drop. */ -webkit-animation-iteration-count: infinite, infinite; -webkit-animation- direction : normal , normal ; -webkit-animation -t iming-function: linear, ease-in; } /* This CSS rule is applied to all img elements directly inside div elements which are directly inside the leafContainer div. In other wo rds , it matches the 'img' elements inside the leafDivs which are created in the createALeaf() function. */ #leafCo ntainer > div > img { position : absolute ; width : 100px ; height : 100px ; /* We use the following properties to adjust the clock wiseSpin or counterclockwiseSpinAn DF lip animations on each leaf. The createALeaf function in the Leaves.js file determines whether a leaf has the clockwiseSpin or counterclockwiseSpinAndFlip animation. */ -webkit-animation-iteration-count: infinite; -webkit-animation- direction : alternate; -webkit-animation-timing-function: ease-in-out; -webkit-transform-origin: 50% -100%; } /* Hides a leaf towards the very end of the animation */ @-webkit-keyframes fade { /* Show a leaf while into or below 95 percent of the animation and hide it, otherwise */ 0% { opacity: 1; } 95% { opacity: 1; } 100% { opacity: 0; } } /* Makes a leaf fall From -300 to 600 pixels in the y-axis */ @-webkit-keyframes drop { /* Move a leaf to -300 pixels in the y-axis at the start of the animation */ 0% { -webkit-transform: translate( 0px , - 50px ); } /* Move a leaf to 600 pixels in the y-axis at the end of the animation */ 100% { -webkit-transform: translate( 0px , 650px ); } } /* Rotates a leaf f rom -50 to 50 deg rees in 2D space */ @-webkit-keyframes clockwiseSpin { /* Rotate a leaf by -50 degrees in 2D space at the start of the animation */ 0% { -webkit-transform: rotate(-50deg); } /* Rotate a leaf by 50 degrees in 2D space at the end of the animation */ 100% { -webkit-transform: rotate(50deg); } } /* Flips a leaf and rotates it from 50 to -50 degrees in 2D space */ @-webkit-keyframes counterclockwiseSpinAndFlip { /* Flip a leaf and rotate it by 50 degrees in 2D space at the start of the animation */ 0% { -webkit-transform: scale(-1, 1) rotate(50deg); } /* Flip a leaf and rotate it by -50 degrees in 2D space at the end of the animation */ 100% { -webkit-transform: scale(-1, 1) rotate(-50deg); } }
JavaScript代码
JavaScript Code 复制内容到剪贴板
/* Define the number of leaves to be used in the animation */ const NUMBER_OF_LEAVES = 30; /* Called when the "Falling Leaves" page is complete ly loaded. */ function init() { /* Get a reference to the element t hat will contain the leaves */ VAR container = document.getElementById( 'leafContainer' ); /* Fill the empty container with new leaves */ for ( var i = 0; i < NUMBER_OF_LEAVES; i++ ) { container.appendChild(createALeaf()); } } /* Receives the lowest and highest values of a range and returns a random integer that falls within that range. */ function randomInteger(low, high) { return low + Math.floor(Math.random() * (high - low)); } /* Receives the lowest and highest values of a range and returns a random float that falls within that range. */ function randomFloat(low, high) { return low + Math.random() * (high - low); } /* Receives a number and returns its CSS pixel value. */ function pixelValue(value) { return value + 'px' ; } /* Returns a duration value for the falling animation. */ function durationValue(value) { return value + 's' ; } /* Uses an img element to create each leaf. "Leaves.css" implements two spin animations for the leaves: clockwiseSpin and counterclockwiseSpinAndFlip. This function determines which of these spin animations should be applied to each leaf. */ function createALeaf() { /* Start by creating a wrapper div, and an empty img element */ var leafDiv = document.createElement( 'div' ); var image = document.createElement( 'img' ); /* Randomly choose a leaf image and assign it to the newly created element */ image.src = 'images/realLeaf' + randomInteger(1, 5) + '.png' ; leafDiv.style.top = "-100px" ; /* Position the leaf at a random location along the screen */ leafDiv.style.left = pixelValue(randomInteger(0, 500)); /* Randomly choose a spin animation */ var spinAnimationName = (Math.random() < 0.5) ? 'clockwiseSpin' : 'counterclockwiseSpinAndFlip' ; /* Set the -webkit-animation-name property with these values */ leafDiv.style.webkitAnimationName = 'fade, drop' ; image.style.webkitAnimationName = spinAnimationName; /* Figure out a random duration for the fade and drop animations */ var fadeAndDropDuration = durationValue(randomFloat(5, 11)); /* Figure out another random duration for the spin animation */ var spinDuration = durationValue(randomFloat(4, 8)); /* Set the -webkit-animation-duration property with these values */ leafDiv.style.webkitAnimationDuration = fadeAndDropDuration + ', ' + fadeAndDropDuration; var leafDelay = durationValue(randomFloat(0, 5)); leafDiv.style.webkitAnimationDelay = leafDelay + ', ' + leafDelay; image.style.webkitAnimationDuration = spinDuration; // add the <img> to the <div> leafDiv.appendChild(image); /* Return this img element so it can be added to the document */ return leafDiv; } /* Calls the init function when the "Falling Leaves" page is full loaded */ window.addEventListener( 'load' , init, false );
以上就是本文的全部内容，希望对大家学习有所帮助。
总结
以上是 为你收集整理的 逼真的HTML5树叶飘落动画 全部内容，希望文章能够帮你解决 逼真的HTML5树叶飘落动画 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。