逼真的HTML5树叶飘落动画

2020-04-21 07:49:22易采站长站整理

    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;