jQuery + CSS3 实现花瓣剥落特效

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


HTML  Code :
        很简单,就两行代码,而且第二行是我给页面添加的背景音乐(装逼的  你懂得......嘿嘿)。
        

CSS  Code :
         jQuery + CSS3 实现花瓣剥落特效_第1张图片
jQuery + CSS3 实现花瓣剥落特效_第2张图片
        

jQuery  Code :
         jQuery + CSS3 实现花瓣剥落特效_第3张图片
jQuery + CSS3 实现花瓣剥落特效_第4张图片


最终效果截图:
jQuery + CSS3 实现花瓣剥落特效_第5张图片










你可能感兴趣的:(CSS3,jQuery)