欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-04-01 14:04:53
...
飘花效果的实现——效果图:

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

查看演示 源码下载

需求:

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

jQuery Transit还有这个东西

http://github.com/rstacruz/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特技


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