2023年快要到来啦,很高兴这次我们又能一起度过~
目录
一、前言
二、跨年烟花
三、效果展示
四、详细介绍
五、编码实现
index.html
fireworks.js(部分)
六、获取代码
需要源码,可以私信我(⊙o⊙)?关注我?
时光荏苒,白驹过隙。
2022这一年又在忙碌中度过了,过去的一年,我们同努力,我们共欢笑,每一次成功都蕴藏着我们辛勤的劳动。
新的一年即将来到,我们不能停滞不前,一味只是骄傲。愿大家与时俱进,拼搏不懈,共创新的辉煌!
借着新年到来的喜庆,给大家分享一个新年烟花的前端代码,快拿着代码展示给你的朋友们看吧!!
转眼间已经到了2022的尾巴,这一年对于国家来说丰富充实,冬奥会在北京举行、中国共产党第二十次全国代表大会召开、社会共同抗击疫情的第三年、我国完成天宫空间站建造……对于我们每一个个体,2022也承载着我们的快乐与悲伤,它是无法替代的。
新的一年马上就要到了,让我们告别2022,迎接2023!
希望2023,全糖去冰。
自从上次发布了 2023跨年代码(烟花+自定义文字+背景音乐+雪花+倒计时) 后,众多兄弟姐妹们慕名而来,反应强烈很受欢迎,受到了极大的鼓励与鼓舞,因此,我决定持续更新跨年烟花前端代码,直至跨年!!!
本文是一篇简单的前端代码,主要内容有HTML,JS,CSS等内容
1、HTML代码
2、JS代码
3、CSS样式
4、插件等
5、自定义背景
6、背景音乐
7、雪花
接下来我们一起来看看效果吧!!!
原背景图(可根据需求更换)
第一点: 本次跨年烟花代码的精彩之处在于可以自定义背景,也就是烟花背景可以进行更换
第二点: 本次跨年烟花仍然具有雪花效果
第三点: 在此基础上听取广大水友意见增加了自定义可更换的背景音乐,具有美妙浪漫的效果,尽管天各一方,也能身临其境。
index.html
我们一起跨年吧!!!
fireworks.js(部分)
(function ($) {
$.fn.fireworks = function(options) {
// set the defaults
options = options || {};
options.sound = options.sound || false;
options.opacity = options.opacity || 1;
options.width = options.width || $(this).width();
options.height = options.height || $(this).height();
var fireworksField = this,
particles = [],
rockets = [],
MAX_PARTICLES = 400,
SCREEN_WIDTH = options.width,
SCREEN_HEIGHT = options.height;
// cache the sounds if the plugin has been configured to use sound
var sounds = [], audio;
因博客字数限制,js 代码不全,请大家根据提示下载源码⭐
在这里我先告诉大家一下,关于路径问题,因为上次有好多朋友们告诉我,部分效果显示不出来,大家看下图,为正确的代码文件及路径
第一步,通过微信公众号下载源码压缩包,解压并打开文件夹,即为上图样式(复制源码请注意路径)
第二步,可以根据需求自定义背景,注意:图片名称默认为 bg.png
第三步,点击 html 文件打开即可,左下角打开背景音乐
以上就是我们此次跨年烟花的全部内容了,是否精彩呢?如果有好的建议或者想法可以联系我,一起交流
此时我们就可以拿着程序展示给小伙伴啦!!!
或许对于小白来说,是不是比桌面新建一个文本文档的方法友好多了呢?其实我们就是为了新年这场美好的氛围,快和你的朋友来一场线上烟花跨年盛宴吧!!!
+✏️+⭐️+
有需要源码的小伙伴可以关注微信公众号 " Enovo开发工厂 ",回复 关键词 " 2-1231 "