首页 > 其他分享 >用html+css+js做canvas烟花模拟网页动画代码

用html+css+js做canvas烟花模拟网页动画代码

时间:2023-12-08 15:31:55浏览次数:37  
标签:canvas 12 6.41 -. 烟花 js html 3.5 21

圣诞节、元旦就要到了,本案例我们将用html+css+js做canvas烟花模拟网页动画代码,程序员的浪漫这不就来了嘛,与家人朋友一起看烟花吧!

用html+css+js做canvas烟花模拟网页动画代码_ico

      附源码

<!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" />

<meta name="msapplication-TileColor" content="#000000" />

<link rel="stylesheet" href="./css/reset.min.css" />

<link rel="stylesheet" href="./css/style.css" />

</head>


<body>

<!-- 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">

<a href="http://www.hereitis.cn" target="_blank">在这里资源站</a>

</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>

<script src="./js/fscreen.js"></script>

<script src="./js/Stage.js"></script>

<script src="./js/MyMath.js"></script>

<script src="./js/index.js"></script>

<!-- <script src="https://cdn.jsdelivr.net/gh/HaoOuBa/Fireworks@main/js/fscreen.js"></script>

<script src="https://cdn.jsdelivr.net/gh/HaoOuBa/Fireworks@main/js/Stage.js"></script>

<script src="https://cdn.jsdelivr.net/gh/HaoOuBa/Fireworks@main/js/MyMath.js"></script>

<script src="https://cdn.jsdelivr.net/gh/HaoOuBa/Fireworks@main/js/index.js"></script> -->

</body>


</html>

标签:canvas,12,6.41,-.,烟花,js,html,3.5,21
From: https://blog.51cto.com/u_16170171/8738754

相关文章

  • Gson与FastJson详解
    Gson与FastJson详解Java与JSON做什么?将Java中的对象快速的转换为JSON格式的字符串.将JSON格式的字符串,转换为Java的对象.Gson将对象转换为JSON字符串转换JSON字符串的步骤:引入JAR包在需要转换JSON字符串的位置编写如下代码即可:Stringjson=newGson().toJSON(要......
  • JSP判断两个时间的时间差
    varqueryStartTime=$("#queryStartTime").val();varqueryEndDate=$("#queryEndDate").val();if(queryStartTime==null||queryEndDate==null){alertx("开始日期、结束日期都不可为空");return;}vartemp_field1=$("#querySta......
  • SpringBoot+线程池实现高频调用http接口并多线程解析json数据
    场景Springboot+FastJson实现解析第三方http接口json数据为实体类(时间格式化转换、字段包含中文):https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/134872936Java中ExecutorService线程池的使用(Runnable和Callable多线程实现):https://blog.csdn.net/BADAO_LIUMAN......
  • HTML中title标签的使用
    HTML中的title标签是非常重要的标签之一,它用来描述网页的标题。在搜索引擎优化中,title标签是非常关键的,因为搜索引擎会将title标签中的文字作为页面的主要描述,并根据其相关性来判断网页内容的质量和权重。本文将详细讲解title标签的使用,包括以下内容:@[toc]##1.title标签的基本用......
  • java JSON对象与字符串间的转换
    importcom.alibaba.fastjson.JSON;importcom.alibaba.fastjson.JSONObject;//字符串转为JSON对象StringstrParam="{\"callerid\":\"013941128270\",\"timestart\":\"2021-07-2709:37:42\",\"status\"......
  • Springboot+FastJson实现解析第三方http接口json数据为实体类(时间格式化转换、字段包
    场景若依前后端分离版手把手教你本地搭建环境并运行项目:https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108465662在上面搭建SpringBoot项目的基础上,并且在项目中引入fastjson、hutool、lombok等所需依赖后。系统需要对接第三方http接口获取返回的数据,并将json数......
  • 使用js和定位排版创建内联广告
    HTML+JS<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><linkrel="stylesheet"href="../css/index.css"><title>使用js和定位排版创建内联广告</title></head&g......
  • Python的json序列化模块
    一、jsonJson模块提供了四个功能:dumps、dump、loads、load1、前景什么叫序列化——将原本的字典、列表等内容转换成一个字符串的过程就叫做序列化。序列化的目的以某种存储形式使自定义对象持久化;将对象从一个地方传递到另一个地方。使程序更具维护性在Python中,能够......
  • 前端学习-JavaScript学习-js基础-API02
    学习视频:黑马程序员视频链接事件监听三要素:事件源、事件类型、事件处理程序随机点名案例<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"&......
  • 在HTML或者JSP中使用Element Plus
    我们都知道如何在node项目中,使用ElementPlus等UI框架,但在单页面中我们该如何引入ElementPlus呢?以下我们以HTML或JSP引入ElementPlus为例,需要按照以下步骤进行引用:步骤一下载ElementPlus首先,您需要下载ElementPlus的文件。您可以通过以下方式下载ElementPlus:访问ElementPlus......