CSS3|jQuery + CSS3 实现花瓣剥落特效

实现原理: 其实花瓣剥落实现与之前写的一篇jQuery实现流星雨特效的实现原理差不多。在脚本中动态创建用来放“花瓣”的节点, 然后,设置花瓣随机从浏览器上边缘随机位置落下,并设置下落过程的时间(一个范围内随机数)、终点(一个范围内随 机数)。另外用CSS 3让花瓣落下的过程中旋转起来,下面直接看实现代码吧。

HTMLCode : 很简单,就两行代码,而且第二行是我给页面添加的背景音乐(装逼的你懂得......嘿嘿)。 CSS3|jQuery + CSS3 实现花瓣剥落特效
文章图片

CSSCode :
CSS3|jQuery + CSS3 实现花瓣剥落特效
文章图片
CSS3|jQuery + CSS3 实现花瓣剥落特效
文章图片

jQueryCode : CSS3|jQuery + CSS3 实现花瓣剥落特效
文章图片
CSS3|jQuery + CSS3 实现花瓣剥落特效
文章图片



最终效果截图:
CSS3|jQuery + CSS3 实现花瓣剥落特效
文章图片










    推荐阅读