使用原生JS实现烟花效果

 

使用原生JS实现如下烟花效果：

点击页面任何位置，出现小圆点并爆炸如图所示

 

 

代码实现：

Html部分：只有一个div标签

 

CSS部分：设置样式

 

Javascript部分

1.引入已经封装好的animate-opacity.js

2.原生js 面向对象编程

　　　　(1)单例模式的思想，向Firework上存储数据

　　   　

　　　　(2)创建元素，元素运动，元素爆炸功能编程

 　　　　

　　　　(3)设置烟花爆炸后的随机位置和颜色

　　　　

　　　　(4) 设置烟花爆炸后的形状（圆形）

　　　　

　　　　(5)创建实例对象