企业官网建设流程全解析

前几天处理一个页面需求时，我遇到了一个很典型的矛盾：对方希望页面“看起来有人情味”，但又没有给任何现成动画库的预算。需求描述很抽象，原文大致是一句话——“在老照片页面上，让东西飘一飘，最好像风把花瓣和雪吹起来。”

这类需求听起来很“感性”，落到技术上就是一组非常标准的粒子动效问题：粒子什么时候产生、什么时候消失、怎么移动、怎么不挡内容、怎么在低端手机上也不至于卡成幻灯片。

“姥爷纷飞”这个名字，与其说是一个成品项目，不如说是一个动效原型：把一组老照片做成纵向回忆墙，在页面上方放一层透明的、可点击穿透的飘落效果层，让花瓣、雪花或纸屑从顶部飘下。“姥爷纷飞”在这里只承担页头标题与示例命名，关键是背后那一套不到两百行的原生 CSS + JavaScript 实现。读完这篇文章，你不只能复刻这个效果，还能理解粒子动画的 DOM 实现思路、性能边界和工程化落点。

文章会按这个顺序展开：先讲清这类动效适合用哪种技术方案；再拆解“粒子一生”的原理；接着给出一份可以直接打开运行的前端项目；最后补上验证手段、常见坑和工程建议。如果你正在做相册类 H5、博客氛围页、活动落地页，或者只是想弄明白“为什么简单的落下动画会卡”，这篇文章比较合适。

1. “姥爷纷飞”到底是一个怎么样的页面结构

先给效果做一个抽象：所谓“页面飘落花瓣”，其实就是在原有内容之上增加一个装饰层。

从页面结构上看，整个项目分成三层：

第一层是普通内容层，也就是标题、文字、照片卡片等。这一层要遵守正常的 HTML 文档流，用户正常滚动，不能被装饰元素挡住交互。

第二层是飘落效果层。它是一个相对于视口固定的容器，覆盖整个窗口。容器里的每一个“粒子”，都是一次独立的小动画。一个粒子从屏幕外出生，用几秒到十几秒时间从高处移动到低处，动画结束后被移除。

第三层是控制逻辑，也就是 JavaScript 按节奏向粒子层中添加粒子，同时又保证同一时间存在的粒子数量在一个合理范围以内。

把“姥爷纷飞”当作一个项目名来拆解，很多人容易一上来就去搜索开源的雪景插件。但这类需求的自定义成本其实很低，绝大部分情况不需要引一个第三方库。自己实现时，重点把握两件事：

• 粒子容器必须position: fixed并且pointer-events: none，让点击穿透，否则页面上的按钮都会失效。
• 粒子到达底部后必须通过animationend事件移除，否则页面停留半小时后，DOM 里会堆积几千个“已经飘完但未删除”的节点，网页最终会被拖垮。

这个结构听起来不复杂，但它决定了后面所有代码的书写方式。与其把它当成“一个漂亮的特效”，不如把它理解成一个“有生命周期的粒子迷你框架”。

为了帮你判断自己的业务场景到底该用什么方式实现，我先把几种常见技术方案做一个对比。

对于“姥爷纷飞”这样一个氛围感原型，几十片花瓣加一点雪，DOM + CSS 完全足够。

1.1 为什么首选 DOM + CSS animation

纯 CSS 动画的最大优点并不是性能上限高，而是“调试成本低”。

花瓣是 DOM 节点，可以直接在浏览器开发者工具的 Elements 面板里看到结构，可以实时修改样式。如果某个粒子位置不对，你能立刻定位到它的 class 和内联样式。改成 Canvas 的话，你只能看到一块画布，粒子的位置全靠代码逻辑脑补，或者额外画一个调试面板。

CSS 动画还有一个好处：浏览器会把transform和opacity这类动画放到合成器线程处理。只要不改变元素的left、top、width、height等会触发布局的属性，动画过程通常不会频繁触发页面的重排，这比用setInterval手动改left要高得多。

当然，缺点也很明显：DOM 粒子一旦数量太多，浏览器需要维护大量节点，创建、插入、删除本身都会带来 GC。所以同一个页面如果同时存在超过百个粒子，就不要继续往上堆 DOM 了，换 Canvas 是更稳的选择。

1.2 “一个粒子”的一生

无论用什么方案，粒子系统都有四个阶段：

1. 诞生
2. 运动
3. 消亡
4. 清理

放到本项目里，最直接的理解就是：

• 诞生：JavaScript 创建一个<span>或<i>节点。
• 运动：给它加上一个随机的水平偏移、随机动画时长、随机旋转角度，通过 CSS 动画从屏幕顶部往下落。
• 消亡：动画播到最后，粒子已经不透明或已经飘出屏幕。
• 清理：监听animationend事件，把这个节点从容器里删掉。

所以粒子动画的代码不是“让东西动起来”，而是“让会动的东西被自动回收”。这个思维很容易被忽略。你搜到的大多数“飘落特效”示例代码，都没有清理环节。示例页面短时间观看没事，但真实用户可能开着页面浏览半小时甚至一小时，DOM 累积最终会导致页面变慢。

2. 核心概念与环境准备

在开始写代码之前，先明确几个名词，方便后面阅读。

• 粒子：这里指页面中参与飘落动画的每一个小元素，可以是一片花瓣、一团雪花、一片白色纸屑。
• 效果层：用于承载粒子的固定容器，项目里命名为fx-layer。
• 出生间隔：每多少毫秒生成一个新粒子。间隔越短，同一时间的粒子数越多，氛围感越强，性能压力也越大。
• 粒子上限：效果层中最多同时存在的粒子数目。达到上限后，暂停生成，等一部分粒子结束后再继续。
• reduced motion：系统辅助功能偏好。部分用户会在操作系统中开启“减弱动态效果”，页面应尽量尊重这一偏好，不开自动飘落或只提供手动触发。

本文代码的运行环境非常基础：

• 一个现代浏览器，如 Chrome 或 Edge，能正常打开网页即可。
• 一个文本编辑器，如 VS Code。
• 不需要安装 Node、不需要构建工具、不需要后端。
• 如果你想用本地静态服务器测试，Node 或 Python 二选一即可，后面会给命令。

代码中的版本不依赖任何第三方库，因此不用锁版本。你只需要保证使用现代浏览器，支持 CSS 自定义属性和animationend事件，就足够跑通整个示例。

3. 页面布局与 CSS 动效实现

先定义三个文件结构，这是最经典的前端零构建项目：

petal-fly/ ├── index.html ├── style.css └── petal.js

index.html负责页面内容与按钮结构；style.css负责页面风格与动画关键帧；petal.js负责粒子的生成与回收。

先看 HTML 的整体骨架。相册的图片素材用本地占位背景代替，不依赖网络图片，这样你复制代码后可以立刻打开。

3.1 页面样式设计要点

背景色使用低饱和度的暖色渐变，模拟旧书和泛黄相纸的视觉。照片卡片本身不需要是真实照片，在代码里用一张渐变占位块加一行文字说明即可。实际项目里，你把占位块替换成<img>标签就可以。

真正值得关注的是效果层：

.fx-layer { position: fixed; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; z-index: 50; }

这个层固定覆盖视口。pointer-events: none是最关键的一行，它保证鼠标和触控事件可以穿透整个层，用户点到底层按钮或链接时不会受影响。z-index的值需要比页面主体的卡面高，但比弹窗要低。如果页面里存在弹窗或 toast，需要临时提高弹窗层级。

粒子本身是绝对定位的：

.particle { position: absolute; top: 0; left: 0; will-change: transform, opacity; pointer-events: none; }

粒子为什么不需要给一个明显的初始位置？因为它的移动完全交给transform。CSS 动画中的translate3d会在合成层移动元素，不会频繁触发页面回流。top: 0只是一个锚点，真正的起始位置由transform: translate3d(...)从视口上方送入。

这里容易踩的坑有两个：

第一，粒子容器本身不能滚动，也不能在容器内部使用overflow-y: auto。它必须是fixed且覆盖整个视口，动画里的位移才与读者视线一致。

第二，粒子不要直接设置top: -100px默认隐藏。这个写法没问题，但如果动画要旋转，元素实际占据的空间会改变，可能引发布局。稳妥做法是始终让粒子悬浮在 fixed 层内，用 translate 控制轨迹。

3.2 CSS 关键帧与变量

为了让每片花瓣落下的路径不一样，最直接的办法是给每个粒子的内联样式设置不同的 CSS 变量，比如：

• --drift-x：水平漂移距离，控制左右摆动幅度
• --drift-y：垂直漂移距离
• --rotate-end：旋转角度
• --duration：动画时长

然后在 CSS 关键帧里使用这些变量。

花瓣落下：

@keyframes petal-fall { 0% { transform: translate3d(0, -40px, 0) rotate(0deg); opacity: 0; } 10% { opacity: 0.9; } 100% { transform: translate3d(var(--drift-x), calc(100vh + 60px), 0) rotate(var(--rotate-end)); opacity: 0.6; } }

雪花下落略有不同，通常增加左右摆动：

@keyframes snow-fall { 0% { transform: translate3d(0, -30px, 0); opacity: 0; } 30% { opacity: 1; } 60% { transform: translate3d(calc(var(--drift-x) * -0.6), 55vh, 0); } 100% { transform: translate3d(var(--drift-x), calc(100vh + 30px), 0); opacity: 0.8; } }

需要留意，calc(100vh + 60px)表示把粒子从屏幕顶部移动到屏幕高度向下再偏移 60px 的位置。因为粒子的top: 0，它默认在整个视口的最顶端，利用 translate3d 把它往下送，视觉上就是从底边滑出。

动画结束后的forwards状态不需要保留。我们会用 JS 在动画结束时删掉整个节点，所以这里不写animation-fill-mode: forwards，否则节点删除前会停留在页面底部，造成短暂堆积。

4. JavaScript 控制粒子生命周期

接下来是核心控制逻辑：按节奏生成粒子，同时保证数量在一个可控范围内。整个脚本设计成普通 IIFE，挂出一个最小接口即可，不污染全局命名空间。

代码中包含两种模式：petal和snow。每种模式定义自己的随机范围，生成的粒子会获得不同的大小、时长、旋转角度和水平偏移。

生成粒子的代码里，最容易犯的错误是给每个粒子直接追加大量随机计算，却没有清理监听器。正确的做法是：在生成时马上追加到fx-layer，然后注册一次animationend，事件触发后移除节点并递减计数。该事件是一次性的，所以不用手动解绑，但如果是不支持一次性的事件监听，你应该在事件函数里调用removeEventListener。

为了让按钮可以手动暂停，还需要记录定时器的 id。暂停时调用clearInterval并且不再追加新粒子。已存在的粒子会继续飘完，不必强行删除，否则画面会突然消失。

4.1 手动按钮与自动飘落

一个比较友好的交互是：

• 页面默认开启“温和”的花瓣飘落。
• 用户点击“暂停飘落”，就会停止向效果层投放新粒子。
• 用户点击“来一阵风”，脚本会在短时间内快速生成一批粒子，形成高密度效果，然后自动结束。

按钮本身并不是粒子动画的必要项。如果你希望页面完全自动，去掉按钮，在页面加载完成后调用最外层的自动开启函数即可。保留按钮主要是为了测试时方便观察暂停、恢复、阵风三种状态。

5. 完整示例代码实现

下面这份代码完整、不需要任何外部图片与第三方脚本，可以直接保存到本地运行。代码使用原生 HTML/CSS/JavaScript，浏览器打开即可看到效果。

5.1 index.html 完整代码

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>姥爷纷飞 · 家庭时光放映室</title> <link rel="stylesheet" href="style.css" /> </head> <body> <div class="page"> <header class="hero"> <p class="eyebrow">家庭数字相册 · 动效示例</p> <h1>姥爷纷飞</h1> <p class="description">泛黄的旧时光被风一片片吹起，又在记忆里落下来。</p> <div class="toolbar"> <button id="toggleAutoBtn" class="btn" type="button">暂停自动飘落</button> <button id="windBtn" class="btn" type="button">来一阵风</button> <span class="counter">当前粒子：<span id="particleCount">0</span></span> </div> </header> <main class="album"> <article class="photo-card photo-card--one"> <div class="photo-mask photo-mask--field"></div> <div class="photo-caption">村口的老树，风一吹就是好多年。</div> </article> <article class="photo-card photo-card--two"> <div class="photo-mask photo-mask--room"></div> <div class="photo-caption">冬天的窗台，有阳光落下来。</div> </article> <article class="photo-card photo-card--three"> <div class="photo-mask photo-mask--river"></div> <div class="photo-caption">河边散步的那年，日子走得慢。</div> </article> <article class="photo-card photo-card--four"> <div class="photo-mask photo-mask--yard"></div> <div class="photo-caption">院子里晒过很多个秋天。</div> </article> </main> </div> <div id="fxLayer" class="fx-layer" aria-hidden="true"></div> <script src="petal.js"></script> </body> </html>

在这份 HTML 里，注意两点：一是id="fxLayer"的效果层被放在内容后面，避免因为 CSS 层级问题遮住内容；二是aria-hidden="true"表示整个装饰层对读屏软件不可见，它不传递任何文字信息，也不应该影响辅助功能。

5.2 style.css 完整代码

* { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; color: #4a3b2a; background: radial-gradient(circle at 20% 10%, rgba(255, 248, 230, 0.9), transparent 40%), linear-gradient(160deg, #f7ecd7 0%, #ead9b8 45%, #d8bf96 100%); min-height: 100vh; } .page { max-width: 980px; margin: 0 auto; padding: 56px 20px 80px; } .hero { text-align: center; padding: 24px 0 40px; } .eyebrow { letter-spacing: 0.3em; color: #9a7b4f; font-size: 13px; text-transform: uppercase; margin-bottom: 10px; } h1 { font-size: 44px; font-weight: 700; color: #4a3520; letter-spacing: 0.12em; } .description { margin-top: 14px; color: #7b6547; font-size: 16px; line-height: 1.8; } .toolbar { margin-top: 24px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; } .btn { border: 1px solid #b79b73; background: rgba(255, 252, 244, 0.75); color: #5b4328; padding: 8px 18px; border-radius: 999px; font-size: 14px; cursor: pointer; transition: background 0.2s, transform 0.1s; } .btn:hover { background: rgba(255, 252, 244, 1); } .btn:active { transform: scale(0.97); } .counter { font-size: 13px; color: #9a7b4f; } .album { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; } .photo-card { background: #fdf8ef; border-radius: 20px; overflow: hidden; box-shadow: 0 12px 30px rgba(80, 55, 20, 0.15); } .photo-mask { height: 260px; background-size: cover; background-position: center; position: relative; } .photo-mask::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(80, 40, 0, 0.08)); } .photo-mask--field { background-image: linear-gradient(135deg, #c39a6b 0%, #e7d3a3 60%, #b0c48d 100%); } .photo-mask--room { background-image: linear-gradient(120deg, #d9c09a 0%, #b58c63 90%); } .photo-mask--river { background-image: linear-gradient(180deg, #b6c7b3 0%, #74a6a2 80%); } .photo-mask--yard { background-image: linear-gradient(140deg, #e9cf94 0%, #b48460 90%); } .photo-caption { padding: 14px 18px; font-size: 14px; color: #6c5842; line-height: 1.7; } @media (max-width: 640px) { .album { grid-template-columns: 1fr; } .photo-mask { height: 220px; } h1 { font-size: 32px; } } #fxLayer { position: fixed; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; z-index: 50; } .particle { position: absolute; top: 0; left: 0; pointer-events: none; will-change: transform, opacity; animation-timing-function: linear; animation-fill-mode: forwards; } .particle--petal { background: linear-gradient(135deg, #f5c1c1, #f1a7a7, #f7ddd4); border-radius: 100% 4px 100% 4px; box-shadow: 0 0 6px rgba(255, 214, 170, 0.4); } .particle--snow { background-color: rgba(255, 255, 255, 0.95); border-radius: 50%; box-shadow: 0 0 8px rgba(255, 255, 255, 0.6); } @keyframes petal-fall { 0% { transform: translate3d(0, -40px, 0) rotate(0deg); opacity: 0; } 10% { opacity: 0.95; } 100% { transform: translate3d(var(--drift-x), calc(100vh + 50px), 0) rotate(var(--rotate-end)); opacity: 0.65; } } @keyframes snow-fall { 0% { transform: translate3d(0, -30px, 0); opacity: 0; } 20% { opacity: 1; } 60% { transform: translate3d(calc(var(--drift-x) * -0.5), 55vh, 0); } 100% { transform: translate3d(var(--drift-x), calc(100vh + 40px), 0); opacity: 0.8; } } @media (prefers-reduced-motion: reduce) { .particle { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; opacity: 0 !important; } }

代码里最后还有一个容易被忽略的增强：prefers-reduced-motion媒体查询。如果用户操作系统开启了“减弱动画”，粒子会变得几乎不可见。这个设计不是装饰，而是为了让有前庭障碍或视觉敏感的用户不被全屏动画干扰。

5.3 petal.js 完整代码

(function () { 'use strict'; var fxLayer = document.getElementById('fxLayer'); var countEl = document.getElementById('particleCount'); var toggleBtn = document.getElementById('toggleAutoBtn'); var windBtn = document.getElementById('windBtn'); var autoTimer = null; var autoRunning = false; var currentCount = 0; var maxParticles = 60; var MODES = { petal: { className: 'particle particle--petal', keyframes: 'petal-fall', duration: [7000, 14000], size: [7, 14], opacity: [0.6, 1], driftX: [-70, 120], rotateEnd: [40, 320] }, snow: { className: 'particle particle--snow', keyframes: 'snow-fall', duration: [8000, 16000], size: [5, 11], opacity: [0.5, 0.95], driftX: [-90, 90], rotateEnd: [0, 0] } }; function rand(min, max) { return Math.random() * (max - min) + min; } function updateCount() { if (countEl) { countEl.textContent = String(currentCount); } } function createParticle(modeKey) { if (currentCount >= maxParticles) { return; } var mode = MODES[modeKey]; var el = document.createElement('i'); el.className = mode.className; var width = rand(mode.size[0], mode.size[1]); var height = width * rand(1.2, 1.8); var duration = rand(mode.duration[0], mode.duration[1]); var driftX = rand(mode.driftX[0], mode.driftX[1]); var rotateEnd = rand(mode.rotateEnd[0], mode.rotateEnd[1]); el.style.width = width + 'px'; if (modeKey === 'snow') { el.style.height = width + 'px'; } else { el.style.height = height + 'px'; } el.style.left = rand(-10, 100) + '%'; el.style.opacity = rand(mode.opacity[0], mode.opacity[1]); el.style.setProperty('--drift-x', driftX.toFixed(1) + 'px'); el.style.setProperty('--rotate-end', rotateEnd.toFixed(1) + 'deg'); el.style.animationName = mode.keyframes; el.style.animationDuration = duration.toFixed(0) + 'ms'; el.style.animationTimingFunction = 'linear'; var removed = false; function removeParticle() { if (removed) { return; } removed = true; if (el.parentNode) { el.parentNode.removeChild(el); } currentCount--; updateCount(); } el.addEventListener('animationend', removeParticle, { once: true }); fxLayer.appendChild(el); currentCount++; updateCount(); } function burst(modeKey, count) { var n = count || 30; for (var i = 0; i < n; i += 1) { createParticle(modeKey); } } function stopAuto() { if (autoTimer !== null) { clearInterval(autoTimer); autoTimer = null; } autoRunning = false; if (toggleBtn) { toggleBtn.textContent = '开启自动飘落'; } } function startAuto(modeKey, interval) { stopAuto(); autoRunning = true; if (toggleBtn) { toggleBtn.textContent = '暂停自动飘落'; } var mode = modeKey || 'petal'; var gap = interval || 420; createParticle(mode); autoTimer = setInterval(function () { createParticle(mode); }, gap); } function toggleAuto() { if (autoRunning) { stopAuto(); } else { startAuto('petal', 420); } } if (toggleBtn) { toggleBtn.addEventListener('click', toggleAuto); } if (windBtn) { windBtn.addEventListener('click', function () { burst('petal', 45); setTimeout(function () { burst('snow', 20); }, 600); }); } var reduceMotionQuery = window.matchMedia('(prefers-reduced-motion: reduce)'); function init() { if (reduceMotionQuery.matches) { stopAuto(); } else { startAuto('petal', 420); } } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); } })();

解释一下这段脚本的几个关键点：

第一，MODES对象把不同粒子类型的参数集中管理，后续想加“彩纸碎片”，只需加一个 mode，并补一套 CSS 关键帧。

第二，createParticle函数在创建节点后立刻维护currentCount，并且监听animationend执行清理。如果动画由于浏览器切后台而暂停，切回来后 animationend 仍然会正常触发，不需要额外降级。

第三，粒子初始宽度和高度是随机生成的，但这里没有给el.style.height单独指定像height * 1.6这样的值，而用随机高宽比。这样制作的花瓣形状不完全相同，视觉上更接近自然飘落。

第四，每个粒子的水平位置用了百分比left: rand(-10, 100) + '%'，然后再通过--drift-x加偏移。因为粒子是绝对定位，百分比是相对于容器宽度，这样可以覆盖整个横屏。

第五，stopAuto不只是清除定时器，还要同步修改按钮文字。这个细节如果漏掉，用户点了“暂停”以后，再看按钮文字仍是“暂停自动飘落”，容易引起困惑。

5.4 本地启动方式

直接双击打开index.html也可以运行。但如果你在浏览器控制台里观察 JS 文件路径，会发现脚本通过相对路径加载，双击打开并不影响，因为本项目没有接口请求，不需要严格的服务端。

不过我还是建议你使用本地静态服务器，主要是为了以后替换成真实图片时，更方便地模拟线上环境。VSCode 用户可以安装 Live Server 插件，或者直接使用命令：

cd petal-fly npx serve .

如果你使用的是 Python 环境，也可以用一行命令启动静态服务：

python -m http.server 8080

启动后浏览器访问：

http://localhost:8080

建议不要只在桌面双击运行，因为浏览器本地文件的file://协议在团队协作和接口联调阶段会造成一些看不见的问题。

6. 运行结果与效果验证

项目正确启动后，页面会显示一个暖黄色调的家庭相册背景，标题显示“姥爷纷飞”，照片卡片采用两列网格排布。同时，页面自动以每 420ms 左右一片的速度向下飘落花瓣，花瓣颜色是浅粉与奶油渐变，在照片之间穿行，但不会遮挡点击。

怎么判断动画成功？可以从下面几个维度验证。

6.1 打开浏览器开发者工具查看节点

按 F12，打开 Elements 面板，找到id="fxLayer"的 div。

正常情况下，你会看到这个容器下不断产生 class 为particle particle--petal的<i>元素，并且上一批元素移出屏幕后会自动消失。如果打开面板观察 10 秒钟，粒子数量不会无限增加，而是在 20 到 60 之间浮动。

面板右上角的当前粒子计数应该也在同一个范围波动。点击“暂停自动飘落”，容器中不再新增粒子，但已经存在的粒子仍然继续下落直到清空。点击“来一阵风”，会一次性出现几十个粒子，随后慢慢减少。这个现象符合项目设计。

6.2 用 Performance 面板观察是否存在连续卡顿

在 Chrome DevTools 中切换到 Performance 面板，点击录制，然后上下滚动页面 5 秒左右，停止录制。

查看 Main 线程上的绿色脚本与红色长任务。正常情况下，粒子生成只会有少量短 task，不会出现大面积连续长任务。如果你发现 Main 线程被大量“Layout”或“Recalculate Style”占满，说明某处在改变会触发布局的属性，优先排查 CSS 中是否存在 width、height、margin、left/top 动画，而不是 transform 动画。

同样值得关注的是 FPS 曲线。如果 FPS 经常低于 30，而页面只是二三十片花瓣，就要减少maxParticles到 30 或把 canvas 方案提上日程。

6.3 用控制台手动做压力验证

在浏览器 Console 里执行：

for (let i = 0; i < 80; i++) { document.querySelector('#fxLayer button') // 没有这个节点 }

上面的写法是错的，因为粒子的创建函数在 IIFE 内部，并没有暴露到 window。你不需要手动调用生成函数，已经可以通过按钮“来一阵风”观察高密度场景。如果你确实想压测，可以在petal.js里临时把maxParticles改为 200，然后刷新页面，观察在低端机上的滚动流畅度。

一个实用心得：不要用纯控制台反复创建大量 DOM 粒子来测试“极限性能”，因为压测结果不能完全代表真实设备性能。比较可靠的方法是，用目标测试机上最普通的浏览器，开研发模式，机型选择中低端 Android，模拟 CPU 降频四倍，然后重复滚动。

7. 常见问题与排查方法

下面列出我在这类动画实践中遇到过的高频问题，做成一张排查表，方便你保存收藏。

这些问题的根源都集中在前几节强调的三个点：定位方式、指针事件、生命周期管理。大部分情况下，绕开这三点，就不会跑偏。

8. 工程实践与项目落地建议

到这里你已经掌握了一个可以运行的飘落动画。但项目真正要上线，还需要做一些工程化调整。下面几条是我个人觉得比较重要的建议，尤其是做相册类或文字阅读类页面时。

8.1 把粒子数量做成配置项，而不是写死在函数里

前面代码里的maxParticles、interval、duration都是零散变量。如果只在演示项目中使用，没有问题。一旦你有多个页面都要用这个效果，我会建议把所有参数收集到一个配置对象里，页面对应不同的氛围写不同配置。

示例配置：

var pageEffects = { memorial: { mode: 'snow', interval: 500, max: 40, autoStart: true }, home: { mode: 'petal', interval: 260, max: 70, autoStart: false } };

这样即使同一个域名下有两个子页面，进入时通过一个><img src="images/photo-01.webp" alt="1996年冬天，姥爷在村口老树下的留影" width="960" height="720" loading="lazy" />

显式写宽高是为了避免图片加载前后发生明显布局跳动。使用现代 WebP 格式，可以在几乎不影响观感的情况下把图片体积减少 40% 到 60%。

8.6 与 Vue / React 等框架集成

如果你的项目不是原生 HTML，而是一个 Vue 或 React 应用，建议不要直接把这段原生代码复制进组件里，而是把粒子动画封装成一个独立函数，接收一个容器 DOM 作为参数。

封装的最小函数是这样：

export function createFallingEffect(container, options) { let running = false; let timer = null; let count = 0; function stop() { running = false; if (timer) { clearInterval(timer); timer = null; } } function start() { stop(); running = true; timer = setInterval(() => { // 添加粒子的逻辑与上面 petal.js 相同 }, options.interval || 400); } return { start, stop, isRunning() { return running; } }; }

组件卸载时，一定要调用返回的stop()，否则定时器仍会继续向已经销毁的 DOM 中塞节点。这一点在 React 的 StrictMode 下尤其容易出现：组件 mount 一次、卸载一次、再 mount 一次，如果不清理定时器，页面会出现重复的粒子叠加。

8.7 不要把自动飘落放在所有页面里

“姥爷纷飞”这个效果很有氛围感，但它不适合作为所有页面的默认行为。记忆类页面、节日活动页或某个产品宣传页适合它，而数据后台、管理后台或用户连续操作的流程中，全屏飘落几乎一定不受欢迎。

建议的落地方式是：

• 只在根路由或专门的展示页启用自动。
• 在其他页面只提供一个“开启氛围模式”的开关。
• 把效果层的高度和透明度调低，避免影响用户读取系统信息。

从我见过的大量实践来看，一个克制的飘落效果才是管理者愿意保留的效果。动画数量越多，用户的新鲜感越低，性能问题也会越明显。默认给十几片花瓣，让画面有呼吸感，已经很好。

9. 内容定位与后续学习方向

说回“姥爷纷飞”这个项目名。它真正演示的不是相册内容，而是一套可复用的“氛围层”实现思路：一个透明的 fixed 容器，一套 CSS 变量驱动的关键帧，一个具备创建与回收逻辑的 JavaScript 定时器。只要理解了这三个段落，未来无论把元素改成花瓣、雪花、落叶、灰尘还是一张张旧照片，代码骨架都是相同的。

如果你现在就想继续往下走，可以从这三个方向练习：

第一，把粒子从 DOM 改造成 Canvas 2D。你可以先在 Canvas 上绘制十个圆形，再逐渐增加数量到三百个，对比“滚动页面时的流畅度差异”。这是理解粒子性能边界最直观的方法。

第二，让元素有真实的缓动曲线。当前示例的运动是线性落下，很多落花效果需要加入水平风力或随机变速。你可以把animationTimingFunction改成ease-in，或者引入一个简单的风力变化函数，让粒子轨迹更自然。

第三，让它变成一个可配置的迷你组件。参考 8.6 小节，把回调函数拆分出来，支持设置粒子数量上限、自动生成间隔、暂停和清理。做成组件后，你就能很方便地把“氛围飘落”内置到公司内部项目里。

最后的工程提醒再强调一遍：本地开发时可以通过双击 HTML 快速验证，但团队协作和真实上线前，建议用本地服务器与版本管理工具进行常规流程。粒子动画是锦上添花的部分，页面内容结构、图片体积、无障碍和基础性能才是真正决定体验的变量。如果你下次再听到类似“页面飘一点什么，氛围就好了”的需求，把这篇文章的思路调出来，直接用一个结构清晰的原型去沟通，会比反复讨论文案有效得多。