HTML最美烟花【附赠完整源码】

已于 2024-01-23 16:58:15 修改
阅读量377 收藏 8
点赞数 8
文章标签： html javascript
于 2024-01-23 16:57:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_75147849/article/details/135775853
版权

烟花代码

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>2024新年快乐！万事如意！</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://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/firework-burst-icon.png">
<link rel="icon" type="image/png" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/firework-burst-icon.png">
<link rel="apple-touch-icon-precomposed" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/firework-burst-icon.png">
<meta name="msapplication-TileColor" content="#000000">
<meta name="msapplication-TileImage" content="https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/firework-burst-icon.png">
<link href="https://fonts.googleapis.com/css?family=Russo+One" rel="stylesheet"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="./style.css">
<style>
* {
  position: relative;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

html {
  background-color: #000;
}

body {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.5);
  font-family: "Russo One", arial, sans-serif;
  line-height: 1.25;
  letter-spacing: 0.06em;
}

.hide {
  opacity: 0;
  visibility: hidden;
}

.remove {
  display: none;
}

.blur {
  filter: blur(12px);
}

.container {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#loading-init {
  width: 100%;
  align-self: center;
  text-align: center;
  font-size: 2em;
}

#stage-container {
  overflow: hidden;
  box-sizing: initial;
  border: 1px solid #222;
  margin: -1px;
}

#canvas-container {
  width: 100%;
  height: 100%;
  transition: filter 0.3s;
}
#canvas-container canvas {
  position: absolute;
  mix-blend-mode: lighten;
}

#controls {
  position: absolute;
  top: 0;
  width: 100%;
  padding-bottom: 50px;
  display: flex;
  justify-content: space-between;
  transition: opacity 0.3s, visibility 0.3s;
}
@media (min-width: 800px) {
  #controls {
    visibility: visible;
  }
  #controls.hide:hover {
    opacity: 1;
  }
}

#menu {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.42);
  transition: opacity 0.3s, visibility 0.3s;
}
#menu__header {
  padding: 20px 0 44px;
  font-size: 2em;
  text-transform: uppercase;
}
#menu form {
  width: 240px;
  padding: 0 20px;
  overflow: auto;
}
#menu .form-option {
  margin: 20px 0;
}
#menu .form-option label {
  text-transform: uppercase;
}
#menu .form-option--select label {
  display: block;
  margin-bottom: 6px;
}
#menu .form-option--select select {
  display: block;
  width: 100%;
  height: 30px;
  font-size: 1rem;
  font-family: "Russo One", arial, sans-serif;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.06em;
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.5);
}
#menu .form-option--select select option {
  background-color: black;
}
#menu .form-option--checkbox label {
  display: flex;
  align-items: center;
  transition: opacity 0.3s;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
#menu .form-option--checkbox input {
  display: block;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  opacity: 0.5;
}
@media (max-width: 800px) {
  #menu .form-option select, #menu .form-option input {
    outline: none;
  }
}

#close-menu-btn {
  position: absolute;
  top: 0;
  right: 0;
}

.btn {
  opacity: 0.16;
  width: 44px;
  height: 44px;
  display: flex;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: default;
  transition: opacity 0.3s;
}
.btn--bright {
  opacity: 0.5;
}
@media (min-width: 800px) {
  .btn:hover {
    opacity: 0.32;
  }
  .btn--bright:hover {
    opacity: 0.75;
  }
}
.btn svg {
  display: block;
  margin: auto;
}
</style>
</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-shutter-fast" viewBox="0 0 24 24">
<path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
</symbol>
<symbol id="icon-shutter-slow" viewBox="0 0 24 24">
<path d="M1 5h2v14H1zm4 0h2v14H5zm17 0H10c-.55 0-1 .45-1 1v12c0 .55.45 1 1 1h12c.55 0 1-.45 1-1V6c0-.55-.45-1-1-1zM11 17l2.5-3.15L15.29 16l2.5-3.22L21 17H11z"/>
</symbol>
</svg>
</div>

<!-- App -->
<div class="container">
<div id="loading-init">Loading...</div>
<div id="stage-container" class="remove">
<div id="canvas-container">
<canvas id="trails-canvas"></canvas>
<canvas id="main-canvas"></canvas>
</div>
<div id="controls">
<div id="pause-btn" class="btn">
<svg fill="white" width="24" height="24"><use href="#icon-pause"></use></svg>
</div>
<div id="shutter-btn" class="btn">
<svg fill="white" width="24" height="24"><use href="#icon-shutter-slow"></use></svg>
</div>
<div id="settings-btn" class="btn">
<svg fill="white" width="24" height="24"><use href="#icon-settings"></use></svg>
</div>
</div>
<div id="menu" class="hide">
<div id="close-menu-btn" class="btn btn--bright">
<svg fill="white" width="24" height="24"><use href="#icon-close"></use></svg>
</div>
<div id="menu__header">Settings</div>
<form>
<div class="form-option form-option--select">
<label>Shell Type</label>
<select id="shell-type"></select>
</div>
<div class="form-option form-option--select">
<label>Shell Size</label>
<select id="shell-size"></select>
</div>
<div class="form-option form-option--checkbox">
<label id="auto-launch-label"><input id="auto-launch" type="checkbox" /><span>Auto Fire</span></label>
</div>
<div class="form-option form-option--checkbox">
<label id="finale-mode-label"><input id="finale-mode" type="checkbox" /><span>Finale Mode</span></label>
</div>
<div class="form-option form-option--checkbox">
<label id="hide-controls-label"><input id="hide-controls" type="checkbox" /><span>Hide Controls</span></label>
</div>
</form>
</div>
</div>
</div>
<!-- partial -->
  <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/fscreen%401.0.1.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/Stage%400.1.4.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/MyMath.js'></script>
<script>
'use strict';
console.clear();


const
最低0.47元/天 解锁文章
m0_75147849
关注
html js烟花特效脚本
02-19
html js烟花特效脚本，
烟花代码,予心上人最璀璨烟花—— 附源码与成品（HTML+CSS+JS
2401_84447262的博客
05-03 1498
整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》dth / 2,});} else {context.font = fontSize + “vw 宋体 bold”;“rgba(” +
HTML+CSS+JavaScript实现烟花绽放的效果源码
preserveXing的博客
07-29 365
一个css案例,在浏览器的可视区域,生成随机大小的烟花图片,天机动画.实现烟花绽放的效果 复制粘贴代码 在同级别下放一张图片fire.png接可以了
超好看的3D烟花代码
热门推荐
yangaoyuan1999的博客
12-25 5万+
<!doctype html> <html> <head> <meta charset="utf-8"> <title>3D烟花</title> <style> html,body{ margin:0px; width:100%; height:100%; overflow:hidden; backg...
html canvas 烟花 特效代码
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
01-05 8660
html canvas 烟花特效
2024 两款烟花特效HTML源码
02-01 359
2024 两款烟花特效HTML源码2024 两款烟花特效HTML源码。两款不同版本的烟花特效HTML源码。可以用来做背景特效等等！
跨年烟花代码-js+html5烟花效果完整源码下载
12-15
在本资源中，我们拥有一个基于JavaScript和HTML5创建的跨年烟花效果的完整源码。这个项目旨在为庆祝活动，如跨年晚会，提供一个动态且视觉吸引人的背景效果，让网页充满节日的氛围。下面我们将详细探讨其中涉及的...
基于C++语言实现的非常漂亮的祝福烟花效果完整源码
09-21
基于C++语言实现的非常漂亮的祝福烟花效果完整源码 基于C++语言实现的非常漂亮的祝福烟花效果完整源码 基于C++语言实现的非常漂亮的祝福烟花效果完整源码 基于C++语言实现的非常漂亮的祝福烟花效果完整源码 基于C++...
新年的烟花春节倒计时源码烟花礼炮html源码
12-10
新年的烟花春节倒计时源码烟花礼炮html源码新年的烟花春节倒计时源码烟花礼炮html源码新年的烟花春节倒计时源码烟花礼炮html源码新年的烟花春节倒计时源码烟花礼炮html源码新年的烟花春节倒计时源码烟花礼炮html源码...
HTML5烟花散射动画效果源码 HTML5FireworksScattering.rar
11-27
HTML5烟花散射动画效果源码 源码描述： 一、源码特点 1、HTML5烟花散射动画效果，基于HTML5 canvas实现，有粉末效果、放射效果，两种特效。 二、注意事项 1、开发语言为HTML5，使用技术：HTML/JS
html5鼠标点击页面放烟花特效特效代码
03-20
html5鼠标点击页面放烟花特效是一款基于html5 canvas制作的烟花动画特效。
HTML5实现烟花效果
01-14
HTML5实现烟花效果
HTML5彩色烟花燃放动画特效特效代码
03-20
HTML5彩色烟花燃放动画特效是一款适用于网页动态背景动画特效。
烟火代码(js)html放烟花代码
01-03
html放烟花,展示放烟花的一些动作,主要体现在js代码里的对象描述.
HTML5庆祝2018年烟花动画特效特效代码
03-20
HTML5庆祝2018年烟花动画特效是一款HTML5 Canvas绘制庆祝2018年放烟花场景动画。
3D 烟花特效
weixin_46376562的博客
09-11 407
3d 烟花特效，宋女朋友也可以哦
Canvas烟花效果 HTML代码烟花特效源代码
锋利的二丫
08-11 1万+
Canvas 烟花效果 一个非常简陋的没什么含金量的小效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } #cv { background: #000; } &lt
java简单烟花代码_JavaScript实现的简单烟花特效代码
weixin_39759155的博客
02-26 4497
本文实例讲述了JavaScript实现的简单烟花特效代码。分享给大家供大家参考，具体如下：这是一款JavaScript烟花特效，过年的时候放到你的网页上祝贺大家牛年大吉吧，是不是很不错？运行效果截图如下：在线演示地址如下：具体代码如下：/p>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">礼花特效html,body{b...
html教师节烟花动画源码
最新发布
09-11
HTML和JavaScript可以用来创建简单的烟花动画效果，尤其在节日主题的页面中很受欢迎。下面是一个简单的烟花动画示例代码，用于在教师节或任何其他节日主题的网站上展示烟花效果。 首先，你需要创建一个HTML文件，然后在其中嵌入JavaScript代码，以及一些用于展示烟花的HTML元素。 HTML部分可能如下所示： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>教师节烟花动画</title> <style> canvas { display: block; position: absolute; top: 0; left: 0; } </style> </head> <body> <canvas id="fireworks"></canvas> <script src="fireworks.js"></script> </body> </html> ``` 接下来是JavaScript部分，命名为`fireworks.js`，它将包含创建和控制烟花动画的代码。由于这段代码相对复杂，这里只是提供一个概念性的示例，不是完整的实现代码： ```javascript document.addEventListener('DOMContentLoaded', () => { var canvas = document.getElementById('fireworks'); var ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; function drawFirework() { // 这里是绘制单个烟花的代码 // 包括烟花爆炸的点以及它们的随机颜色等 } function animate() { // 清除画布 ctx.clearRect(0, 0, canvas.width, canvas.height); // 绘制烟花 drawFirework(); // 循环动画 requestAnimationFrame(animate); } animate(); }); ``` 以上只是一个基础框架，实际的烟花效果需要使用数学算法和粒子系统来创建烟花爆炸的动态效果，以及对性能的优化处理。你可能需要通过监听特定的时间或者事件来触发烟花动画的开始。 为了实现更逼真的烟花效果，你可以使用第三方JavaScript库如`Fireworks.js`或者`canvas-confetti`等，它们提供了更为丰富和定制化的烟花效果。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值