逼真的HTML5树叶飘落动画

}   
  
/* Rotates a leaf from -50 to 50 degrees 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 completely loaded.  
*/  
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(createALeaf());