
Animate.css空中美元钞票飘落动画特效,CSS3物体飘落动画效果,把美元图片换成人民币、红包、树叶、羽毛等也不错哦。
js代码
<script>
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);
</script>










暂无评论内容