又到了一年一度的春節(jié)時期啦！昨天呢是北方的小年，今天是南方的小年，看到大家可以愉快的放煙花，過大年很是羨慕呀！辭舊歲，賀新春，今年我呀要放煙花，過春節(jié)！??。
這個特效簡單的使用了前端三件套即可完成，html，js，css，canvas整體效果如下GIF圖所示（碼內(nèi)隱藏特殊變量，找到有驚喜?。?/p>
背景音樂是《China-E》個人感覺很有新年的感覺，整個China系列的歌曲都很nice，該特效的寓意就是開門大吉，辭舊迎新，2023年的大門向你敞開，新的一年想你招手，小兔子抱著錦鯉，也預(yù)示著吉祥，山魚在這里祝大家前兔無量，大展宏兔！
就是開心，就是玩，就是兔個吉利！，話不多說上代碼！
<body>
<!-- 依舊是簡潔的html代碼 -->
<canvas id="mycanvas"></canvas>
<div id="box">
<button type="button" id="unmuteButton">開啟新年音樂</button>
<button type="button" id="unmuteButton2">關(guān)閉新年音樂</button>
<video id="video" muted autoplay src="./audio/新年音樂.mp3" loop></video>
</div>
</body>比較多的css代碼，所以單獨放在了一個文件下，如果用的時候出現(xiàn)圖片丟失的問題，可以看看路徑寫對了沒文章來源：http://www.zghlxwxcb.cn/news/detail-811983.html
/* 如果單獨放記得去掉style標(biāo)簽哦 */
<style>
* {
margin: 0;
padding: 0;
}
body {
overflow: hidden;
margin: 0;
cursor: pointer;
font-size: 30px;
background: url("../img/辭舊歲賀新春兔年.png");
background-size: 100% 100%;
}
#unmuteButton {
position: absolute;
z-index: -1;
top: 0;
left: 0;
font-size: 10px;
font-family: "STHupo";
width: 80px;
height: 30px;
border: 1px solid red;
background-color: rgb(255, 115, 0);
border-radius: 10%;
}
#unmuteButton2 {
position: absolute;
z-index: -1;
top: 0px;
left: 120px;
font-size: 10px;
font-family: "STHupo";
width: 80px;
height: 30px;
border: 1px solid red;
background-color: rgb(255, 115, 0);
border-radius: 10%;
}
#video {
position: absolute;
top: -100000;
left: -100000;
}
#box {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
#box::before,
#box::after {
content: '';
z-index: 99;
margin-top: -37px;
float: left;
width: 50%;
height: 1000px;
background: url("../img/兔子2023.png") no-repeat;
transition: .4s;
}
#box::before {
float: left;
background-position: -220px 37px;
}
#box::after {
float: right;
background-position: -210px;
}
#box:hover::before {
transform: translateX(-100%)
}
#box:hover::after {
transform: translateX(100%)
}
/* 去除滾動條 */
body::-webkit-scrollbar {
width: 0 !important
}
</style>比比比比較多的js代碼，注意同上文章來源地址http://www.zghlxwxcb.cn/news/detail-811983.html
// 煙花生成
window.requestAnimationFrame = (function () {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function (callback) {
window.setTimeout(callback, 1000)
}
})();
// 獲取畫布
var area = document.getElementById("mycanvas");
area.width = document.documentElement.clientWidth;
area.height = document.documentElement.clientHeight;
var ctx = area.getContext("2d");
hue = 120;
timerTick = 0;
timerTotal = 5;
fireworks = [];
particles = [];
function random(min, max) {
return Math.random() * (max - min) + min;
}
function distans(sx, sy, tx, ty) {
var xdistan = sx - tx;
var ydistan = sy - ty;
return Math.sqrt((Math.pow(xdistan, 2) + Math.pow(ydistan, 2)));
}
function Firework(sx, sy, tx, ty) {
this.x = sx;
this.y = sy;
this.sx = sx;
this.sy = sy;
this.tx = tx;
this.ty = ty;
this.targetDistances = distans(sx, sy, tx, ty);
this.distancesc = 0;
this.shanyu = [];
this.shanyucount = 3;
while (this.shanyucount--) {
this.shanyu.push([this.x, this.y]);
}
this.angle = Math.atan2(ty - sy, tx - sx);
this.speed = 2;
this.jiasudu = 1.05;
this.brightness = random(50, 70);
this.targetRad = 5;
}
Firework.prototype.update = function (index) {
this.shanyu.pop();
this.shanyu.push([this.x, this.y]);
if (this.targetRad < 8) {
this.targetRad += 0.3;
} else {
this.targetRad = 1;
}
this.speed *= this.jiasudu;
var vx = Math.cos(this.angle) * this.speed;
var vy = Math.sin(this.angle) * this.speed;
this.distancesc = distans(this.sx, this.sy, this.x + vx, this.y + vy);
if (this.distancesc >= this.targetDistances) {
createparticals(this.tx, this.ty);
fireworks.splice(index, 1)
} else {
this.x += vx;
this.y += vy;
}
}
Firework.prototype.draw = function () {
ctx.beginPath();
ctx.moveTo(this.shanyu[this.shanyu.length - 1][0], this.shanyu[this.shanyu.length - 1][1]);
ctx.lineTo(this.x, this.y);
ctx.strokeStyle = 'hsl(' + hue + ',100%,' + this.brightness + '%)';
ctx.stroke();
ctx.beginPath();
ctx.arc(this.tx, this.ty, this.targetRad, 0, Math.PI * 2);
ctx.stroke();
}
function Particle(x, y) {
this.x = x;
this.y = y;
this.shanyu = [];
this.shanyucount = 10;
while (this.shanyucount--) {
this.shanyu.push([this.x, this.y]);
}
this.angle = random(0, 2 * Math.PI);
this.speed = random(1, 10);
this.mocal = 0.95;
this.gravity = 0.98;
this.hue = random(hue - 20, hue + 20);
this.brightness = random(50, 80);
this.alpha = 1;
this.decay = random(0.015, 0.03);
}
Particle.prototype.update = function (index) {
this.shanyu.pop();
this.shanyu.unshift([this.x, this.y]);
this.speed *= this.mocal;
this.x += Math.cos(this.angle) * this.speed;
this.y += Math.sin(this.angle) * this.speed + this.gravity;
this.alpha -= this.decay;
if (this.alpha <= this.decay) {
particles.splice(index, 1)
}
}
Particle.prototype.draw = function () {
ctx.beginPath();
ctx.moveTo(this.shanyu[this.shanyu.length - 1][0], this.shanyu[this.shanyu.length - 1][1]);
ctx.lineTo(this.x, this.y);
ctx.strokeStyle = 'hsl(' + hue + ',100%,' + this.brightness + '%)';
ctx.stroke();
}
function createparticals(x, y) {
var particalcount = 500;
while (particalcount--) {
particles.push(new Particle(x, y))
}
}
var clientw = document.documentElement.clientWidth;
var clienth = document.documentElement.clientHeight;
function loop() {
requestAnimationFrame(loop);
hue += 0.5;
ctx.globalCompositeOperation = 'destination-out';
ctx.fillRect(0, 0, clientw, clienth);
ctx.fillStyle = 'rgb(0,0,0,0.5)';
ctx.globalCompositeOperation = 'lighter';
var i = fireworks.length;
while (i--) {
fireworks[i].draw();
fireworks[i].update(i);
}
var i = particles.length;
while (i--) {
particles[i].draw();
particles[i].update(i);
}
if (timerTick >= timerTotal) {
fireworks.push(new Firework(clientw / 2, clienth, random(0, clientw), random(0, clienth)));
timerTick = 0;
} else {
timerTick++;
}
}
window.οnlοad = loop();
window.onload = function starttime() {
ptimer = setTimeout(starttime, 1000);
}
// 音樂控制
unmuteButton.addEventListener('click', function () {
video.muted = false;
});
unmuteButton2.addEventListener('click', function () {
video.muted = true;
});結(jié)束嘍，下一篇新春特效就是下一年嘍！
點贊：您的贊賞是我前進(jìn)的動力！ ??
收藏：您的支持我是創(chuàng)作的源泉！ ?
評論：您的建議是我改進(jìn)的良藥！ ?
山魚的個人社區(qū)：歡迎大家加入我的個人社區(qū)—— 山魚社區(qū)
到了這里，關(guān)于【用三大件寫出的開門煙花特效】的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
