千丝海阁

前一阵子，根据Freshblog的配色，加了一段树叶飘零的js特效，代码来自国外网站，也忘了出自哪了。要是有人知道，可以告诉tiandi，tiandi会加上原文链接。
由于一直有合并js的习惯，所以尝试着回忆当时加这段特效时改过哪些东西，似乎就只是加了以下这段代码，现将代码分享，如果加上下面代码后没有效果，请留言告知，我再看看还需要加点什么东西。

/* Define the number of leaves to be used in the animation */
const NUMBER_OF_LEAVES = 5;

/* 
    Called when the "Falling Leaves" page is completely loaded.
*/
function initleaves()
{
    /* Get a reference to the element that will contain the leaves */
    var container = document.getElementById('wrapper');
    /* 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 = 'http://www.tiandiyoyo.com/wp-content/themes/freshblog/images/leave' + randomInteger(1, 5) + '.png';

    leafDiv.id = "leafid";
    leafDiv.style.top = "-70px";

    /* Position the leaf at a random location along the screen */
    leafDiv.style.left = pixelValue(randomInteger(220, 1100));
    
    /* 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;

    /* Set the -moz-animation-name property with these values */
    leafDiv.style.animationName = 'fade, drop';
    image.style.animationName = spinAnimationName;
    
    /* Figure out a random duration for the fade and drop animations */
    var fadeAndDropDuration = durationValue(randomFloat(6, 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;

    /* Set the -moz-animation-duration property with these values */
    leafDiv.style.animationDuration = fadeAndDropDuration + ', ' + fadeAndDropDuration;

    var leafDelay = durationValue(randomFloat(0, 5));
    leafDiv.style.webkitAnimationDelay = leafDelay + ', ' + leafDelay;
	leafDiv.style.animationDelay = leafDelay + ', ' + leafDelay;

    image.style.webkitAnimationDuration = spinDuration;
	image.style.animationDuration = 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', initleaves, false);

[flatbtn type=fieldblue]2013.8.1追加更新css样式[/flatbtn]

#wrapper {
    margin: 50px auto;
	height: 600px;
    overflow: hidden;
    border: 4px solid #5C090A;
}
#wrapper #leafid 
{
    position: absolute;
    width: 100px;
    height: 100px;
    -webkit-animation-iteration-count: infinite, infinite;
    -webkit-animation-direction: normal, normal;
    -webkit-animation-timing-function: linear, ease-in;
}
#wrapper > div > img {
     position: absolute;
     width: 100px;
     height: 100px;
     -webkit-animation-iteration-count: infinite;
     -webkit-animation-direction: alternate;
     -webkit-animation-timing-function: ease-in-out;
     -webkit-transform-origin: 50% -100%;
}
@-webkit-keyframes fade
{
    0%   { opacity: 1; }
    95%  { opacity: 1; }
    100% { opacity: 0; }
}
@-webkit-keyframes drop
{
    0%   { -webkit-transform: translate(0px, -50px); }
    100% { -webkit-transform: translate(0px, 650px); }
}

@-webkit-keyframes clockwiseSpin
{
    0%   { -webkit-transform: rotate(-50deg); }
    100% { -webkit-transform: rotate(50deg); }
}

@-webkit-keyframes counterclockwiseSpinAndFlip 
{
    0%   { -webkit-transform: scale(-1, 1) rotate(50deg); }
    100% { -webkit-transform: scale(-1, 1) rotate(-50deg); }
}

请自行准备树叶的png文件放置于images目录下，最后如果不是在wordpress中调用则需要在需要显示效果的页面上加上以下代码：

<div id="wrapper"></div>