JS实现圆形烟花效果

JS实现圆形烟花效果

一、代码思路

1. 首先要有一个烟花场地

2. 因为烟花是在点击的时候出现，所以可以先不写烟花的盒子，只是写样式，在点击的时候创建烟花。

3. js实现之前，要有一个运动函数

4. 先写烟花升起的js，再写烟花爆炸的效果

5. 并进行随机效果，随机范围爆炸

二、代码实现

1. body部分

在这里插入图片描述

2. css部分

image

3. js部分

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

4. move运动函数

在这里插入图片描述

三、效果图

在这里插入图片描述

四、总结

1. 引爆点使用构造函数创建的时候，要注意this的使用，以及传参传的是哪个。

2. js中设置left和top的时候，注意是否加px

3. 封装move函数