如何用前端html实现2025烟花效果

最新推荐文章于 2025-06-09 17:29:06 发布

原创

最新推荐文章于 2025-06-09 17:29:06 发布 · 911 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #数据库 #开发语言

用HTML、CSS和JavaScript编写的网页，主要用于展示“2025，happy！”的文字形式烟花效果。下面是对代码主要部分的分析：

HTML结构

包含三个<canvas>元素，用于绘制动画。
引入百度统计的脚本。

CSS样式

设置body的背景为黑色，并使得canvas元素绝对定位，覆盖整个页面。

JavaScript 功能

百度统计脚本：页面开始时引入了百度统计的脚本，用于网页访问数据分析。

获取URL参数：GetRequest函数用于解析URL中的查询字符串参数。

烟花碎片（Shard）类：

每个Shard代表烟花爆炸后的一个碎片。

包含碎片的位置、颜色、大小、速度等属性。

draw方法用于在canvas上绘制碎片。

update方法用于更新碎片的位置和状态。

火箭（Rocket）类：

表示发射的烟花火箭。

包含火箭的位置、速度、颜色等属性。

draw方法用于在canvas上绘制火箭。

update方法用于更新火箭的位置。

explode方法用于模拟火箭爆炸，生成多个Shard实例。

初始化和动画循环：

获取所有canvas元素和对应的2D渲染上下文。

根据屏幕大小调整字体大小，以适应屏幕宽度，并在一个canvas上绘制“2025，happy！”文字。

通过读取绘制的文字的像素数据，确定烟花爆炸的目标位置。

使用requestAnimationFrame创建动画循环，不断更新和绘制火箭和碎片，模拟烟花效果。

辅助函数：

lerp（线性插值函数）：用于平滑地在两个值之间插值，常用于动画效果中。

执行流程：

页面加载完成后，动画循环开始运行。

每隔一定帧数，生成一个新的Rocket实例，模拟火箭发射。

当火箭达到一定高度后，调用explode方法，生成多个Shard实例，模拟烟花爆炸。

碎片根据预设的目标位置移动，最终形成“2025，happy！”的文字形状。

<!DOCTYPE html>
<html lang="en">
<script>
  var _hmt = _hmt || [];
  (function () {
    var hm = document.createElement("script");
    hm.src = "https://hm.baidu.com/hm.js?c923daf3182a4b0ce01878475080aadc";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
  })();
</script>

<head>
  <meta charset="UTF-8">
  <title>2025，蛇年快乐！</title>
</head>
<style>
  body {
    margin: 0;
    overflow: hidden;
    background: black;
  }

  canvas {
    position: absolute;
  }
&l