【网页设计】春节页面背景模板

无偿下载地址：https://download.csdn.net/download/weixin_47040861/88811143

1.实现效果

2.代码

1.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>春节</title><link rel="stylesheet" href="index.css">
</head><body><img src="./image/鞭炮.gif" class="gifL"><img src="./image/鞭炮.gif" class="gifR"><canvas id="canvas"></canvas><div class="middle"></div></body></html><script src="./index.js"></script>

2.css

*{margin: 0;padding: 0;
}
html,body{height: 100%;
}
body{background-image: url(./image/bg.png);background-size: 100% 100%;
}
.gifL,.gifR{position: absolute;height: 100vh;
}
.gifR{right: 0;
}
#canvas{position: absolute;z-index: -1;
}
.middle{height: 100vh;width: 100vh;margin: 0 auto;position: relative;text-align: center;background-color: rgb(255, 255, 255,0.5);/*颜色*/
}

3.JavaScript

window.addEventListener("resize", resizeCanvas, false);window.addEventListener("DOMContentLoaded", onLoad, false);window.requestAnimationFrame =window.requestAnimationFrame ||window.webkitRequestAnimationFrame ||window.mozRequestAnimationFrame ||window.oRequestAnimationFrame ||window.msRequestAnimationFrame ||function (callback) {window.setTimeout(callback, 1000 / 60);};var canvas, ctx, w, h, particles = [], probability = 0.02,xPoint, yPoint;function onLoad() {canvas = document.getElementById("canvas");ctx = canvas.getContext("2d");resizeCanvas();drawBackgroundImage();window.requestAnimationFrame(updateWorld);}function resizeCanvas() {if (!!canvas) {w = canvas.width = window.innerWidth;h = canvas.height = window.innerHeight;}}function updateWorld() {update();paint();window.requestAnimationFrame(updateWorld);}function update() {if (particles.length < 500 && Math.random() < probability) {createFirework();}var alive = [];for (var i = 0; i < particles.length; i++) {if (particles[i].move()) {alive.push(particles[i]);}}particles = alive;}function paint() {ctx.globalCompositeOperation = 'source-over';ctx.clearRect(0, 0, w, h);drawBackgroundImage();ctx.globalCompositeOperation = 'lighter';for (var i = 0; i < particles.length; i++) {particles[i].draw(ctx);}}function drawBackgroundImage() {var backgroundImage = new Image();backgroundImage.src = 'image/bg.png';ctx.drawImage(backgroundImage, 0, 0, w, h);}function createFirework() {xPoint = Math.random() * (w - 200) + 100;yPoint = Math.random() * (h - 200) + 100;var nFire = Math.random() * 50 + 100;var c = "rgb(" + (~~(Math.random() * 200 + 55)) + ","+ (~~(Math.random() * 200 + 55)) + "," + (~~(Math.random() * 200 + 55)) + ")";for (var i = 0; i < nFire; i++) {var particle = new Particle();particle.color = c;var vy = Math.sqrt(25 - particle.vx * particle.vx);if (Math.abs(particle.vy) > vy) {particle.vy = particle.vy > 0 ? vy : -vy;}particles.push(particle);}}function Particle() {this.w = this.h = Math.random() * 4 + 1;this.x = xPoint - this.w / 2;this.y = yPoint - this.h / 2;this.vx = (Math.random() - 0.5) * 10;this.vy = (Math.random() - 0.5) * 10;this.alpha = Math.random() * .5 + .5;this.color;}Particle.prototype = {gravity: 0.05,move: function () {this.x += this.vx;this.vy += this.gravity;this.y += this.vy;this.alpha -= 0.01;if (this.x <= -this.w || this.x >= screen.width ||this.y >= screen.height ||this.alpha <= 0) {return false;}return true;},draw: function (c) {c.save();c.beginPath();c.translate(this.x + this.w / 2, this.y + this.h / 2);c.arc(0, 0, this.w, 0, Math.PI * 2);c.fillStyle = this.color;c.globalAlpha = this.alpha;c.closePath();c.fill();c.restore();}}

3.介绍

HTML结构：

定义了两个img标签显示两串鞭炮，canvas标签显示背景图片和烟花效果，在div标签middle中可以添加内容。

JavaScript部分：

通过事件监听器，在窗口大小变化和文档加载完成时分别触发 resizeCanvas 和 onLoad 函数。
创建全局变量 canvas、ctx、w、h、particles、probability、xPoint 和 yPoint 用于Canvas的绘制和动画控制。
resizeCanvas 函数在窗口大小变化时调整Canvas的大小。
onLoad 函数在文档加载完成后初始化Canvas并调用 updateWorld 函数开始动画。
updateWorld 函数是主循环，负责更新和绘制Canvas中的粒子。
update 函数用于更新粒子数组。
paint 函数负责清除画布并绘制背景图片以及粒子效果。
drawBackgroundImage 函数加载并绘制背景图片。
createFirework 函数创建烟花，随机生成烟花的位置、颜色和数量。
Particle 构造函数创建粒子对象，包含粒子的大小、位置、速度、透明度和颜色。
Particle 原型对象包含 gravity 属性和 move、draw 方法，用于更新粒子的位置和绘制粒子。