烟花代码,予心上人最璀璨烟花—— 附源码与成品（HTML+CSS+JS）
Posted 我想养只猫 •͓͡•ʔ
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了烟花代码,予心上人最璀璨烟花—— 附源码与成品（HTML+CSS+JS）相关的知识，希望对你有一定的参考价值。
🏮时逢岁末，暮雪千山，万家灯火，流年偷换。虎年🐅除夕之夜，愿你清零过往，除去烦恼，迎接希望，新年可期！ 🎉🎉
新年大家都在用代码实现对联、礼花、画虎，我保证，这将是你见过最炫的🎇烟花代码！😎
目录
✨成品演示✨
先看效果 🎉
如果没有显示，可能是内容较大，请等待一下
🖥️具体实现 🖥️
篇幅有限,具体更多代码请将 成品下载 章节
结构
index.html
访问的主页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>新年烟花</title>
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="stylesheet" href="static/css/style.css">
</head>
<body onselectstart="return false">
<!-- 消息提示 -->
<div class="message">
<p>请单击屏幕开启背景音乐</p>
</div>
<!-- 流星与星火 -->
<div id="backgroundRendering" style="z-index: 0;"></div>
<!--烟花-->
<canvas id="fireworks" style="z-index: 9999;">
您的浏览器不支持canvas标签。
</canvas>
<!-- 背景音乐 -->
<audio id="bgm" src="static/mp3/bgm.mp3" loop autoplay>
您的浏览器不支持 audio 标签。
</audio>
<!-- 自定义内容弹窗 -->
<div style="display: none">
<div class="shape">🏮2022新年快乐🏮</div>
<div class="shape">🏮恭喜发财🏮</div>
<div class="shape">🏮万事如意🏮</div>
<div class="shape">🏮吉庆有余🏮</div>
<div class="shape">🏮心想事成🏮</div>
<div class="shape">🏮喜气盈门🏮</div>
<div class="shape">🏮阖家欢乐🏮</div>
<div class="shape">🏮财源广进🏮</div>
</div>
<script src="static/js/main.js"></script>
</body>
</html>
style.css
全局样式的管理
html,
body
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: #161929;
position: relative;
overflow: hidden;
user-select: none;
audio
opacity: 0;
.message
position: fixed;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
width: 160px;
background-color: rgba(0, 0, 0, 0.52);
padding: 0px 17px;
top: 25px;
border-radius: 6px;
overflow: hidden;
z-index: 1000;
opacity: 0;
/* 消息提示框内容样式 */
.message p
line-height: 1;
font-size:14px;
color: #ffffff;
.spark
width: 3px;
height: 3px;
border-radius: 50%;
position: absolute;
background-color: rgba(231, 200, 160, 0.8);
box-shadow: 0 0 40px 0 rgba(231, 200, 160, 0.8);
animation: glow 5s infinite;
.medium-spark
width: 7px;
height: 7px;
.big-spark
width: 10px;
height: 10px;
box-shadow: 0 0 40px 0 #e9c9a0, 0 0 20px 0 #FFFFFF, inset 0 0 4px #FFFFFF;
.meteor
width: 6px;
height: 6px;
background-color: rgba(255, 255, 255, 0.6);
box-shadow: 0 0 40px 0 #e9c9a0, 0 0 20px 0 #FFFFFF, inset 0 0 8px rgba(255, 255, 255, 0.6);
top: 0;
left: 80%;
opacity: 0.3;
transform: rotate(-45deg) translate(0, -50px);
animation: meteor 7s infinite;
.meteor:after
content: '';
width: 20vw;
height: 6px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.1);
box-shadow: 0 0 20px rgba(231, 200, 160, 0.4);
position: absolute;
top: 0;
left: 0;
@keyframes glow
0%
opacity: 0.9;
50%
opacity: 0.2;
100%
opacity: 0.9;
@keyframes meteor
0%
transform: rotate(-45deg) translateX(0);
opacity: 0.3;
10%
opacity: 1;
20%
transform: rotate(-45deg) translateX(-100vw);
opacity: 0;
100%
transform: rotate(-45deg) translateX(-100vw);
opacity: 0;
main.js
核心功能的实现
// 初始化内容
var wH = window.innerHeight;
var wW = window.innerWidth;
let backgroundRendering = document.getElementById("backgroundRendering");
var generateStars = function generateStars(f)
for (var e = 0; e < f; e++)
var single = document.createElement("div");
single.className = e % 20 == 0 ? "spark big-spark" : e % 9 == 0 ? "spark medium-spark" : "star";
single.setAttribute("style", "top:" + Math.round(Math.random() * wH) + "px;left:" + Math.round(Math.random() * wW) + "px;animation-duration:" + (Math.round(Math.random() * 3000) + 3000) + "ms;animation-delay:" + Math.round(Math.random() * 3000) + "ms;");
backgroundRendering.appendChild(single);
;
generateStars(getRandom(140,240));
// 全局变量 提供内容/对象存储
let fireworksCanvas = document.getElementById("fireworks");
let currentFireworks = document.createElement("canvas");
let currentObject = currentFireworks.getContext("2d");
let fireworksObject = fireworksCanvas.getContext("2d");
currentFireworks.width = fireworksCanvas.width = window.innerWidth;
currentFireworks.height = fireworksCanvas.height = window.innerHeight;
let fireworksExplosion = [];
let autoPlayFlag = false;
// 自动加载烟花动画
window.onload = function ()
drawFireworks();
lastTime = new Date();
animationEffect();
// 背景音乐
let audio = document.getElementById('bgm');
document.querySelector("body").onclick = function ()
if (!autoPlayFlag)
audio.play();
autoPlayFlag = true;
for (let i = 0; i <= 10; i++)
setTimeout(function ()
document.querySelector("body > div.message").style.opacity = i/10;
,i*60+2000)
;
for (let i = 0; i <= 10; i++)
setTimeout(function ()
document.querySelector("body > div.message").style.opacity = 1 - i/10;
,i*60+8000)
;
;
let lastTime;
// 烟花动画效果
function animationEffect()
fireworksObject.save();
fireworksObject.fillStyle = "rgba(0,5,25,0.1)";
fireworksObject.fillRect(0, 0, fireworksCanvas.width, fireworksCanvas.height);
fireworksObject.restore();
let newTime = new Date();
if (newTime - lastTime > getRandom(10,1600) + (window.innerHeight - 767) / 2)
let random = Math.random() * 100 > 15;
let x = getRandom(0, (fireworksCanvas.width));
let y = getRandom(0,400);
if (random)
let bigExplode = new explode(
getRandom(0, fireworksCanvas.width),
getRandom(1, 3),
"#FFF",
x: x,
y: y,
);
fireworksExplosion.push(bigExplode);
else
let x = getRandom(fireworksCanvas.width/2-300, fireworksCanvas.width/2+300);
let y = getRandom(0, 350);
let bigExplode = new explode(
getRandom(0, fireworksCanvas.width),
getRandom(1, 3),
"#FFF",
x: x,
y: y,
,
document.querySelectorAll(".shape")[
parseInt(getRandom(0, document.querySelectorAll(".shape").length))
]
);
fireworksExplosion.push(bigExplode);
lastTime = newTime;
sparks.foreach(function ()
this.paint();
);
fireworksExplosion.foreach(function ()
let that = this;
if (!this.dead)
this._move();
this._drawLight();
else
this.explodes.foreach(function (index)
if (!this.dead)
this.moveTo();
else
if (index === that.explodes.length - 1)
fireworksExplosion[fireworksExplosion.indexOf(that)] = null;
);
);
setTimeout(animationEffect, 16);
Array.prototype.foreach = function (callback)
for (let i = 0; i < this.length; i++)
if (this[i] !== null)
callback.apply(this[i], [i]);
;
fireworksCanvas.onclick = function (evt)
let x = evt.clientX;
let y = evt.clientY;
let explode = new explode(
getRandom(fireworksCanvas.width / 3, (fireworksCanvas.width * 2) / 3),
2,
"#FFF",
x: x,
y: y,
);
fireworksExplosion.push(explode);
;
let Python表白代码：“ 星光月夜烟花皆归你，我也归你”（满天烟花盛开附番外玫瑰）