在本教程中，我们将使用HTML、CSS和JavaScript创建一场绚烂的烟花动画，以欢庆2023年的到来。我们还将添加一个动态改变颜色的文字和一个版权信息栏。
效果图
首先，我们从HTML开始：
HTML是我们网页的骨架，我们将在其中放置我们的canvas，文字和版权信息栏。以下是我们的HTML代码：
<!DOCTYPE html>
<html>
<head>
<title>2023年烟花动画</title>
<link rel="stylesheet" type="text/css" href="./css/fireworks.css">
<style>
/* 修改背景色 */
body {
background-color: #000;
}
/* 修改字体 */
.center-text {
font-family: 'Courier New', Courier, monospace;
font-size: 4em;
color: white;
text-shadow: 3px 3px 5px rgba(255, 255, 255, 0.3);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.footer {
position: fixed;
bottom: 0;
width: 100%;
text-align: center;
color: white;
background-color: rgba(0, 0, 0, 0.6); /* 半透明背景 */
padding: 10px;
font-size: 1em;
animation: fadeInOut 5s infinite; /* CSS 动画 */
font-family: 'Courier New', Courier, monospace; /* 修改字体 */
}
/* CSS 动画的关键帧 */
@keyframes fadeInOut {
0% {
opacity: 1;}
50% {
opacity: 0.5;}
100% {
opacity: 1;}
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<div class="center-text">
<span class="red">2</span>
<span class="orange">0</span>
<span class="yellow">2</span>
<span class="green">3</span>
</div>
<!-- 在这里添加版权声明 -->
<div class="footer">
苏呆仔专享权限
</div>
<script src="./js/fireworks.js"></script>
</body>
</html>
在这个HTML文件中，我们创建了一个黑色的背景，一个动态的"2023"文字和一个版权声明栏。
然后，我们进入CSS：
CSS是我们网页的美化层，它定义了网页的样式。下面是我们的CSS代码：
body, canvas {
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
height: 100%;
background: #000;
}
.center-text {
position: absolute;
top: 50%;
left: 50%;
font-size: 5em;
transform: translate(-50%, -50%);
color: white;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
animation: colorChange 5s infinite;
}
@keyframes colorChange {
0% {
color: red; }
20% {
color: orange; }
40% {
color: yellow; }
60% {
color: green; }
80% {
color: blue; }
100% {
color: purple; }
}
.red {
color: red;
animation: colorChangeRed 5s infinite;
}
.orange {
color: orange;
animation: colorChangeOrange 5s infinite;
}
.yellow {
color: yellow;
animation: colorChangeYellow 5s infinite;
}
.green {
color: green;
animation: colorChangeGreen 5s infinite;
}
@keyframes colorChangeRed {
0% {
color: red; }
25% {
color: orange; }
50% {
color: yellow; }
75% {
color: green; }
100% {
color: blue; }
}
@keyframes colorChangeOrange {
0% {
color: orange; }
25% {
color: yellow; }
50% {
color: green; }
75% {
color: blue; }
100% {
color: purple; }
}
@keyframes colorChangeYellow {
0% {
color: yellow; }
25% {
color: green; }
50% {
color: blue; }
75% {
color: purple; }
100% {
color: red; }
}
@keyframes colorChangeGreen {
0% {
color: green; }
25% {
color: blue; }
50% {
color: purple; }
75% {
color: red; }
100% {
color: orange; }
}
在这个CSS文件中，我们主要定义了"2023"文字的样式和动画，以及版权声明栏的样式。
最后，我们进入JavaScript：
JavaScript是我们网页的行为层，它定义了网页的动态效果。以下是我们的JavaScript代码：
// 所有烟花的数组
var fireworks = [];
// 烟花的构造函数
function Firework(sx, sy, tx, ty) {
this.x = sx;
this.y = sy;
this.vx = tx ? ((tx - sx) / 100) : 0;
this.vy = ty ? ((ty - sy) / 100) : Math.random() * (-5);
this.alpha = 1; // alpha通道，用于实现烟花消失的效果
this.color = "hsl(" + (Math.random() * 360) + ", 100%, 50%)"; // 色彩随机
}
// 烟花的绘制方法
Firework.prototype.draw = function (ctx) {
ctx.beginPath();
ctx.arc(this.x, this.y, 3, 0, Math.PI * 2);
ctx.fillStyle = this.color;
ctx.globalAlpha = this.alpha; // 设置alpha通道
ctx.fill();
};
// 获取画布
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
// 设置画布的尺寸
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// 监听鼠标移动事件
window.onmousemove = function (e) {
// 创建一个新的烟花并添加到数组中
var f = new Firework(e.clientX, e.clientY, null, null);
fireworks.push(f);
};
// 监听鼠标离开窗口的事件
window.onmouseout = function () {
var f = new Firework(Math.random() * window.innerWidth, window.innerHeight, null, null);
fireworks.push(f);
};
// 动画循环
function loop() {
// 清除画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.globalAlpha = 1; // 恢复全局alpha
// 绘制所有的烟花，并更新位置
for (var i = 0; i < fireworks.length; i++) {
fireworks[i].x += fireworks[i].vx;
fireworks[i].y += fireworks[i].vy;
fireworks[i].vy += 0.01; // 加速度，模拟重力
fireworks[i].alpha -= 0.01; // alpha递减，烟花逐渐消失
// 如果烟花完全消失了，就从数组中删除
if (fireworks[i].alpha <= 0) {
fireworks.splice(i, 1);
continue;
}
fireworks[i].draw(ctx);
}
// 通过requestAnimationFrame来进行动画循环
requestAnimationFrame(loop);
}
// 开始动画循环
loop();
// 每隔一段时间在底部随机位置创建烟花
setInterval(function () {
// 每次创建5个烟花
for(var i = 0; i < 5; i++){
var f = new Firework(Math.random() * window.innerWidth, window.innerHeight, null, null);
fireworks.push(f);
}
}, 500); // 修改为每半秒创建一次烟花
这个JavaScript文件主要定义了烟花的行为和动画，包括烟花的生成、移动和消失，以及鼠标移动或离开窗口时生成烟花的逻辑。