基于JS+CSS+HTML的跨年春节3D烟花模拟器
2024-06-23 20:22:19
目录
网页效果预览编辑
完整项目下载地址
详细实现代码
网页效果预览
完整项目下载地址
基于JS+CSS+HTML的跨年模拟烟花代码-Javascript文档类资源-CSDN文库https://download.csdn.net/download/agelee/87365914
详细实现代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>烟花模拟器</title><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"><meta name="mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="theme-color" content="#000000"><link rel="shortcut icon" type="image/png" href="https://fireworks.nianbroken.top/NianBrokenStorage/images/favicon.png"><link rel="icon" type="image/png" href="https://fireworks.nianbroken.top/NianBrokenStorage/images/favicon.png"><link rel="apple-touch-icon-precomposed" href="https://fireworks.nianbroken.top/NianBrokenStorage/images/favicon.png"><meta name="msapplication-TileColor" content="#000000"><meta name="msapplication-TileImage" content="https://fireworks.nianbroken.top/NianBrokenStorage/images/favicon.png"><link href="https://fireworks.nianbroken.top/NianBrokenStorage/fonts/css.css" rel="stylesheet"><link rel="stylesheet" href="https://fireworks.nianbroken.top/NianBrokenStorage/css/style.css"></head><body><!-- partial:index.partial.html --><!-- SVG Spritesheet --><div style="height: 0; width: 0; position: absolute; visibility: hidden;"><svg xmlns="http://www.w3.org/2000/svg"><symbol id="icon-play" viewBox="0 0 24 24"><path d="M8 5v14l11-7z" /></symbol><symbol id="icon-pause" viewBox="0 0 24 24"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z" /></symbol><symbol id="icon-close" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" /></symbol><symbol id="icon-settings" viewBox="0 0 24 24"><path d="M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z" /></symbol><symbol id="icon-sound-on" viewBox="0 0 24 24"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z" /></symbol><symbol id="icon-sound-off" viewBox="0 0 24 24"><path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z" /></symbol></svg></div><!-- App --><div class="container"><div class="loading-init"><div class="loading-init__header">加载中</div><div class="loading-init__status">正在装配烟花</div></div><div class="stage-container remove"><div class="canvas-container"><canvas id="trails-canvas"></canvas><canvas id="main-canvas"></canvas></div><div class="controls"><div class="btn pause-btn"><svg fill="white" width="24" height="24"><use href="#icon-pause" xlink:href="#icon-pause"></use></svg></div><div class="btn sound-btn"><svg fill="white" width="24" height="24"><use href="#icon-sound-off" xlink:href="#icon-sound-off"></use></svg></div><div class="btn settings-btn"><svg fill="white" width="24" height="24"><use href="#icon-settings" xlink:href="#icon-settings"></use></svg></div></div><div class="menu hide"><div class="menu__inner-wrap"><div class="btn btn--bright close-menu-btn"><svg fill="white" width="24" height="24"><use href="#icon-close" xlink:href="#icon-close"></use></svg></div><div class="menu__header">设置</div><div class="menu__subheader">若想了解更多信息 请点击任意标签</div><form><div class="form-option form-option--select"><label class="shell-type-label">烟花类型</label><select class="shell-type"></select></div><div class="form-option form-option--select"><label class="shell-size-label">烟花大小</label><select class="shell-size"></select></div><div class="form-option form-option--select"><label class="quality-ui-label">画质</label><select class="quality-ui"></select></div><div class="form-option form-option--select"><label class="sky-lighting-label">照亮天空</label><select class="sky-lighting"></select></div><div class="form-option form-option--select"><label class="scaleFactor-label">缩放</label><select class="scaleFactor"></select></div><div class="form-option form-option--checkbox"><label class="auto-launch-label">自动放烟花</label><input class="auto-launch" type="checkbox" /></div><div class="form-option form-option--checkbox form-option--finale-mode"><label class="finale-mode-label">同时放更多的烟花</label><input class="finale-mode" type="checkbox" /></div><div class="form-option form-option--checkbox"><label class="hide-controls-label">隐藏控制按钮</label><input class="hide-controls" type="checkbox" /></div><div class="form-option form-option--checkbox form-option--fullscreen"><label class="fullscreen-label">全屏</label><input class="fullscreen" type="checkbox" /></div><div class="form-option form-option--checkbox"><label class="long-exposure-label">保留烟花的火花</label><input class="long-exposure" type="checkbox" /></div></form><div class="credits"><p class="copyright">您的IP：<script src="https://pv.sohu.com/cityjson?ie=utf-8"></script><script type="text/javascript">document.write(returnCitySN["cip"])</script><br /><script>var mydate = new Date();document.writeln("Copyright © 2021 - " + mydate.getFullYear() + ' <a target="_blank" href="https://www.nianbroken.top/">碎念_Nian</a><br />All Rights Reserved');</script></p></div></div></div></div><div class="help-modal"><div class="help-modal__overlay"></div><div class="help-modal__dialog"><div class="help-modal__header"></div><div class="help-modal__body"></div><button type="button" class="help-modal__close-btn">关闭</button></div></div></div><!-- partial --><script src='https://fireworks.nianbroken.top/NianBrokenStorage/js/fscreen.js'></script><script src='https://fireworks.nianbroken.top/NianBrokenStorage/js/Stage.js'></script><script src='https://fireworks.nianbroken.top/NianBrokenStorage/js/MyMath.js'></script><script src="https://fireworks.nianbroken.top/NianBrokenStorage/js/script.js"></script></body>
</html>基于JS+CSS+HTML的跨年春节3D烟花模拟器相关推荐
- ❤女朋友生日❤ HTML+css3+js 实现抖音炫酷樱花3D相册 (含背景音乐)程序员表白必备
一年一度的/520/七夕情人节/女朋友生日/程序员表白,是不是要给女朋友或者正在追求的妹子一点小惊喜呢,今天这篇博客就分享下前端代码如何实现3D立体动态相册.赶紧学会了,来制作属于我们程序员的浪漫吧! ...
- ❤女朋友生日❤ HTML+css3+js 实现抖音炫酷樱花3D相册 (含背景音乐)程序员表白必备...
一年一度的/520/七夕情人节/女朋友生日/程序员表白,是不是要给女朋友或者正在追求的妹子一点小惊喜呢,今天这篇博客就分享下前端代码如何实现3D立体动态相册.赶紧学会了,来制作属于我们程序员的浪漫吧! ...
- animate inater插件_基于animate.css动画库的全屏滚动小插件，适用于vue.js(移动端、pc)项目...
功能简介 基于animate.css动画库的全屏滚动,适用于vue.js(移动端.pc)项目. 安装 npm install vue-animate-fullpage --save 使用 main.j ...
- 基于HTML+CSS+JS+JQuery的京东商城
基于HTML+CSS+JS+JQuery的京东商城 包含京东商城首页,商品详情页,购物车页,订单确认页,结算页面,登录页,注册页. 项目截图 注册页面,有正则表达式验证,验证码则为6位随机数,注册成功 ...
- 基于用django，mysql 以及echarts设计一个图书网页（内含js,css，img路径设置，数据库的一些常见问题）
(1)设计步骤:网页------>url路径端------>view数据传输 (1,1) 网页设计: (1,1,1)登录界面: <!doctype html> <html ...
- css3情侣游戏,11个基于HTML/CSS/JS的情人节表白可爱小游戏、小动画【情人节主题征文】...
情人节表白可爱小游戏.小动画 我要悄悄学习,做一个浪漫的程序员 1.小鹿亲嘴 2.变成小猫 3.爱心表白 4.爱心溢出 5.思念如马 6.霓虹灯爱心 7.3D旋转相册 8.用不同的语言说"爱 ...
- 基于html+css+js实现动态时钟
参照B站的一个视频,利用html+css+js实现了动态时钟. 视频链接为: link 动态时钟的效果 基于HTML+css+js实现的动态时钟 完整代码 <!DOCTYPE html> ...
- 基于HTML/CSS/JS的架子鼓，可以用键盘弹奏⌨️
基于HTML/CSS的架子鼓,您可以用键盘弹奏⌨️ 组装套件 怎么玩? 进行声音检查 下载 1.CSDN积分下载 2.关注公众号 相关内容 我已经制作了吉他,您可以在这里找到它: JavaScript
- 「跨域」利用node.js实践前端各种跨域方式（上）
前言 常言道,"读万卷书,不如行万里路".技术的学习也是如此,唯有实践才能更清楚的明白原理和加深印象,因此本文会利用node.js对前端的各种跨域方式进行实践,强烈建议一步一步跟着 ...
最新文章
- SQL2K数据库开发二十三之索引操作重建索引
- 加载网络图片的框架总结
- mvn命令安装jar包--转
- 第一章 编程基础知识
- PHP 的 Phar 包原来性能这么强！
- U-Mail邮件服务器树状通讯录实现智能化应用
- spring项目启动执行特定方法
- spring分布式事务学习笔记（2）
- Eclpise 和 MyEclipse 的区别
- mysql 隐式转换 索引_MySQL性能优化：MySQL中的隐式转换造成的索引失效
- Syntaxhighligher 使用中的一些问题
- Guava LoadingCache用法
- Windows phone 8.1 MessageBox 变了哦！
- Go 相关的框架，库和软件的精选清单
- 计算机it是什么,IT是什么意思
- Python 中国象棋源码 V1
- 自动更新之安装apk
- 0 13 amp 0 17c语言,急等网址跳转大神，无用网址尾巴处理：index.php?id=13amp;amp;rew...
- 基于网络的入侵检测数据集研究综述（A Survey of Network-based Intrusion Detection Data Sets）
- spring调用切面失效分析（类内调用自身切面方法或其他切面方法失效）