特效描述：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()
//执行函数
})
