jQuery 流星雨特效

实现原理：

        向指定DOM元素中动态插入一个新的DOM节点——单个流星的Box ;  然后再每隔0.3秒从浏览器上边缘随机位置滑出，再给它加上横向速度和纵向速度， 调用jQuery  animate()方法给它指定终点坐标和滑行时间 , 从而就有了斜向下飞过的特效；

需求分析：

        (1)、在脚本中动态创建单个流星 ；  

        (2)、流星从屏幕上边缘随机滑出；  >>> startLeft   startTop两个属性

        (3)、随机的横向与纵向速度；  >>>Math.random( )

        (4)、指定持续时间；  >>> durationTime  

(5)、每隔0.3秒执行一次脚步, 从而就有了" 流星雨 " ;   >>> setInterval( )

HTML很简单就一行：

      

CSS部分代码：

      

      

jQuery部分代码 :

      

最终效果截图：