特效描述：jQuery css3 全屏花瓣飘落 动画特效。jQuery css3从上往下飘落爱心花瓣动画特效。(不兼容IE6，7，8)

代码结构

1. 引入JS

2. HTML代码

$(function() {

var snowflakeURl = [

'./images/icon_petal_1.png',

'./images/icon_petal_2.png',

'./images/icon_petal_3.png',

'./images/icon_petal_4.png',

'./images/icon_petal_5.png',

'./images/icon_petal_6.png',

'./images/icon_petal_7.png',

'./images/icon_petal_8.png'

]

var container = $("#content");

visualWidth = container.width();

visualHeight = container.height();

//获取content的宽高

function snowflake() {

// 雪花容器

var $flakeContainer = $('#snowflake');

// 随机六张图

function getImagesName() {

return snowflakeURl[[Math.floor(Math.random() * 8)]];

}

// 创建一个雪花元素

function createSnowBox() {

var url = getImagesName();

return $('

'width': 25,

'height': 26,

'position': 'absolute',

'backgroundRepeat':'no-repeat',

'zIndex': 100000,

'top': '-41px',

'backgroundImage': 'url(' + url + ')'

}).addClass('snowRoll');

}

// 开始飘花

setInterval(function() {

// 运动的轨迹

var startPositionLeft = Math.random() * visualWidth - 100,

startOpacity = 1,

endPositionTop = visualHeight - 40,

endPositionLeft = startPositionLeft - 100 + Math.random() * 500,

duration = visualHeight * 10 + Math.random() * 5000;

// 随机透明度，不小于0.5

var randomStart = Math.random();

randomStart = randomStart < 0.5 ? startOpacity : randomStart;

// 创建一个雪花

var $flake = createSnowBox();

// 设计起点位置

$flake.css({

left: startPositionLeft,

opacity : randomStart

});

// 加入到容器

$flakeContainer.append($flake);

// 开始执行动画

$flake.transition({

top: endPositionTop,

left: endPositionLeft,

opacity: 0.7

}, duration, 'ease-out', function() {

$(this).remove() //结束后删除

});

}, 500);

}

snowflake()

//执行函数

})