羽毛飘落的css3动画,Animate.css空中美元钞票飘落动画特效

js代码

const NUMBER_OF_LEAVES = 15;

const width=window.screen.width;

function init(){

var container = document.getElementById('leafContainer');

for (var i = 0; i < NUMBER_OF_LEAVES; i++)

{

container.appendChild(createALeaf());

}

}

function randomInteger(low, high)

{

return low + Math.floor(Math.random() * (high - low));

}

function randomFloat(low, high)

{

return low + Math.random() * (high - low);

}

function pixelValue(value)

{

return value + 'px';

}

function durationValue(value)

{

return value + 's';

}

function createALeaf()

{

var leafDiv = document.createElement('div');

var image = document.createElement('img');

image.src = 'images/cash' + randomInteger(3, 7) + '.png';

leafDiv.style.top = "-100px";

leafDiv.style.left = pixelValue(randomInteger(0, width));

var spinAnimationName = (Math.random() < 0.5) ? 'clockwiseSpin' : 'counterclockwiseSpinAndFlip';

leafDiv.style.webkitAnimationName = 'fade, drop';

image.style.webkitAnimationName = spinAnimationName;

var fadeAndDropDuration = durationValue(randomFloat(3, 9));

var spinDuration = durationValue(randomFloat(3, 7));

leafDiv.style.webkitAnimationDuration = fadeAndDropDuration + ', ' + fadeAndDropDuration;

var leafDelay = durationValue(randomFloat(0, 0));

leafDiv.style.webkitAnimationDelay = leafDelay + ', ' + leafDelay;

image.style.webkitAnimationDuration = spinDuration;

leafDiv.appendChild(image);

return leafDiv;

}

window.addEventListener('load', init, false);