jquery+css3实现网页背景花瓣随机飘落特效

飘花效果的实现——效果图：

查看演示  源码下载

需求：

一个jquery，，，这个看标题么就知道了

jQuery Transit还有这个东西

jquery对一些效果的扩展

飘花的效果稍微复杂一点，有一定量的JavaScript代码，通过JS+CSS3的组合实现的。观察右边效果，可以大致分解飘花的实现

飘花比人物的层级都高

飘花数量非常多

飘花会有一定的轨迹运动

飘花带有渐变的效果

飘花带有旋转的效果

飘花落到地面会消失

这里采用的JS+CSS3的结合实现，CSS3实现旋转部分，首先从布局上来说，飘花是要比所有内部元素层级都要高，所以布局上是要与页面li平级才可以

实现原理：

通过定时器调用JS代码不断的动态创建雪花节点，随机选择一个图片作为其背景，赋予三个初始的样式属性top,left与opacity，通过transition动画过度的方式执行这3个属性的动画变化。整个原理其实也是很简单的，主要涉及了一些细节的问题：例如元素的创建、图片的随机、开始的left与opacity的随机处理、最终值的计算等等

执行的流程：

getImagesName随机6张图片，snowflakeURl定义一个地址的范围

createSnowBox创建雪花元素的节点，并且增加一个snowRoll的样式，也就是旋转的关键帧实现

定时器设置200ms不断的生成雪花对象，计算出3个属性的初始值，通过createSnowBox创建雪花元素，并且附上初始值，然后执行transition附上最终值，执行动画

动画结束后执行$(this).remove()  删除这个对象

然后精简一下代码，因为我只要飘花效果

获取外面#content的宽高

然后#snowflake里面做效果

#content { width: 100%; height: 100%; top: 42px;

overflow: hidden; position: absolute; }

然后么css么就是这样了，top：42px是因为我的导航高度

#snowflake { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden; }

.snowRoll { position: absolute; opacity: 0; -webkit-animation-name: mysnow; -webkit-animation-duration: 20s; -moz-animation-name: mysnow; -moz-animation-duration: 20s; height: 80px; }

@-webkit-keyframes mysnow { 0% {

bottom: 100%;

}

50% {

-webkit-transform: rotate(1080deg);

}

100% {

-webkit-transform: rotate(0deg) translate3d(50px, 50px, 50px);

}

}

@-moz-keyframes mysnow { 0% {

bottom: 100%;

}

50% {

-moz-transform: rotate(1080deg);

}

100% {

-moz-transform: rotate(0deg) translate3d(50px, 50px, 50px);

}

}

这里是给飘花加旋转之类的css3特技

$(function() {

var snowflakeURl = [

'http://images.cnblogs.com/cnblogs_com/LoveOrHate/723567/o_1.png',

'http://images.cnblogs.com/cnblogs_com/LoveOrHate/723567/o_2.png',

'http://images.cnblogs.com/cnblogs_com/LoveOrHate/723567/o_3.png',

'http://images.cnblogs.com/cnblogs_com/LoveOrHate/723567/o_4.png',

'http://images.cnblogs.com/cnblogs_com/LoveOrHate/723567/o_5.png',

'http://images.cnblogs.com/cnblogs_com/LoveOrHate/723567/o_6.png'

] //js设置数组存储6张花瓣的图片

var container = $("#content");

visualWidth = container.width();

visualHeight = container.height();

//获取content的宽高

///

//飘雪花 //

///

function snowflake() {

// 雪花容器

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

// 随机六张图

function getImagesName() {

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

}

// 创建一个雪花元素

function createSnowBox() {

var url = getImagesName();

return $('

'width': 41,

'height': 41,

'position': 'absolute',

'backgroundSize': 'cover',

'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() //结束后删除

});

}, 200);

}

snowflake()

//执行函数

})

以上代码就是本文使用jquery实现网页背景花瓣随机飘落特效，希望大家喜欢。相关阅读:

HTML基础重点_一般标签、常用标签和表格

网页布局之响应式设计简明指南

JS实现消息来时让网页标题闪动效果的方法

使用jQuery中的wrap()函数操作HTML元素的教程

ASP.NET编程获取网站根目录方法小结

php与java通过socket通信的实现代码

win10预览版开始菜单打不开怎么办？

组织结构可以任意拖动到指定位置div

js 时间格式与时间戳的相互转换示例代码

部署PHP项目应该注意的几点事项分享

ionic实现滑动的三种方式

探讨Ajax中有关readyState(状态值)和status(状态码)的问题

CSS浏览器兼容性Hack大全

php中如何使对象可以像数组一样进行foreach循环