JS实现烟花效果

.不喜欢吃鸭头

于 2021-01-11 17:55:39 发布

阅读量1k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： css+js 文章标签： js css css3 html

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.youkuaiyun.com/wangYaj/article/details/112396638

css+js 专栏收录该内容

8 篇文章

订阅专栏

该博客介绍了使用JS实现圆形烟花效果的方法。先阐述代码思路，包括准备烟花场地、点击创建烟花、编写运动函数、实现升起与爆炸效果及随机爆炸等；接着展示代码实现，涵盖body、css、js部分和move运动函数；最后给出效果图并总结注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JS实现圆形烟花效果

一、代码思路

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

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

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

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

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

二、代码实现

1. body部分

在这里插入图片描述

2. css部分

3. js部分

在这里插入图片描述

4. move运动函数

在这里插入图片描述

三、效果图

在这里插入图片描述

四、总结

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

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

3. 封装move函数

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。