HTML5树叶飘落动画

分享一款HTML5树叶飘落动画，这款HTML5树叶飘落动画是基于webkit内核的，所以需要webkit内核的浏览器才能播放该动画，效果真的非常酷。function init(){ /* Get a reference to the element that 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(ALeaf()); }}/* 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 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 ALeaf(){ /* Start by creating a wrapper div, and an empty img element */ var leafDiv = document.Element('div'); var image = document.Element('img'); /* Randomly choose a leaf image and assign it to the newly d 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 to the