尧图网站建设 
前几天处理一个页面需求时我遇到了一个很典型的矛盾对方希望页面“看起来有人情味”但又没有给任何现成动画库的预算。需求描述很抽象原文大致是一句话——“在老照片页面上让东西飘一飘最好像风把花瓣和雪吹起来。”这类需求听起来很“感性”落到技术上就是一组非常标准的粒子动效问题粒子什么时候产生、什么时候消失、怎么移动、怎么不挡内容、怎么在低端手机上也不至于卡成幻灯片。“姥爷纷飞”这个名字与其说是一个成品项目不如说是一个动效原型把一组老照片做成纵向回忆墙在页面上方放一层透明的、可点击穿透的飘落效果层让花瓣、雪花或纸屑从顶部飘下。“姥爷纷飞”在这里只承担页头标题与示例命名关键是背后那一套不到两百行的原生 CSS JavaScript 实现。读完这篇文章你不只能复刻这个效果还能理解粒子动画的 DOM 实现思路、性能边界和工程化落点。文章会按这个顺序展开先讲清这类动效适合用哪种技术方案再拆解“粒子一生”的原理接着给出一份可以直接打开运行的前端项目最后补上验证手段、常见坑和工程建议。如果你正在做相册类 H5、博客氛围页、活动落地页或者只是想弄明白“为什么简单的落下动画会卡”这篇文章比较合适。1. “姥爷纷飞”到底是一个怎么样的页面结构先给效果做一个抽象所谓“页面飘落花瓣”其实就是在原有内容之上增加一个装饰层。从页面结构上看整个项目分成三层第一层是普通内容层也就是标题、文字、照片卡片等。这一层要遵守正常的 HTML 文档流用户正常滚动不能被装饰元素挡住交互。第二层是飘落效果层。它是一个相对于视口固定的容器覆盖整个窗口。容器里的每一个“粒子”都是一次独立的小动画。一个粒子从屏幕外出生用几秒到十几秒时间从高处移动到低处动画结束后被移除。第三层是控制逻辑也就是 JavaScript 按节奏向粒子层中添加粒子同时又保证同一时间存在的粒子数量在一个合理范围以内。把“姥爷纷飞”当作一个项目名来拆解很多人容易一上来就去搜索开源的雪景插件。但这类需求的自定义成本其实很低绝大部分情况不需要引一个第三方库。自己实现时重点把握两件事粒子容器必须position: fixed并且pointer-events: none让点击穿透否则页面上的按钮都会失效。粒子到达底部后必须通过animationend事件移除否则页面停留半小时后DOM 里会堆积几千个“已经飘完但未删除”的节点网页最终会被拖垮。这个结构听起来不复杂但它决定了后面所有代码的书写方式。与其把它当成“一个漂亮的特效”不如把它理解成一个“有生命周期的粒子迷你框架”。为了帮你判断自己的业务场景到底该用什么方式实现我先把几种常见技术方案做一个对比。方案实现难度粒子数量上限适合场景主要成本DOM 节点 CSS animation非常低几十到一百左右轻量页面、移动端 H5、快速开发节点创建和移除需要认真管理Canvas 2D 手绘粒子中等几百到上千视觉元素丰富、粒子互相穿插需要自己控制设备像素比和 FPSWebGL / 粒子库高几千甚至更多大屏、重度视觉、游戏化场景学习成本高打包体积大对于“姥爷纷飞”这样一个氛围感原型几十片花瓣加一点雪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 “一个粒子”的一生无论用什么方案粒子系统都有四个阶段诞生运动消亡清理放到本项目里最直接的理解就是诞生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.jsindex.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 langzh-CN head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / title姥爷纷飞 · 家庭时光放映室/title link relstylesheet hrefstyle.css / /head body div classpage header classhero p classeyebrow家庭数字相册 · 动效示例/p h1姥爷纷飞/h1 p classdescription泛黄的旧时光被风一片片吹起又在记忆里落下来。/p div classtoolbar button idtoggleAutoBtn classbtn typebutton暂停自动飘落/button button idwindBtn classbtn typebutton来一阵风/button span classcounter当前粒子span idparticleCount0/span/span /div /header main classalbum article classphoto-card photo-card--one div classphoto-mask photo-mask--field/div div classphoto-caption村口的老树风一吹就是好多年。/div /article article classphoto-card photo-card--two div classphoto-mask photo-mask--room/div div classphoto-caption冬天的窗台有阳光落下来。/div /article article classphoto-card photo-card--three div classphoto-mask photo-mask--river/div div classphoto-caption河边散步的那年日子走得慢。/div /article article classphoto-card photo-card--four div classphoto-mask photo-mask--yard/div div classphoto-caption院子里晒过很多个秋天。/div /article /main /div div idfxLayer classfx-layer aria-hiddentrue/div script srcpetal.js/script /body /html在这份 HTML 里注意两点一是idfxLayer的效果层被放在内容后面避免因为 CSS 层级问题遮住内容二是aria-hiddentrue表示整个装饰层对读屏软件不可见它不传递任何文字信息也不应该影响辅助功能。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 面板找到idfxLayer的 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. 常见问题与排查方法下面列出我在这类动画实践中遇到过的高频问题做成一张排查表方便你保存收藏。问题现象可能原因排查方式解决方案页面没有任何粒子出现脚本在 HTML 之前执行找不到fxLayer或者 JS 报错打开控制台查看 Uncaught 错误确认脚本顺序将 script 放在fxLayer之后或监听DOMContentLoaded粒子出生位置全部集中在同一列只给粒子设置了left: 0%在 Elements 中检查粒子内联样式给left设置一个随机百分比范围如-10%~100%粒子落到一半突然瞬移到底部容器的height小于视口或使用了overflow:hidden却对子元素采用百分比高度定位检查父级#fxLayer是否为 fixed高度是否 100%明确设置position: fixed; width: 100%; height: 100%页面上下滚动时粒子层跟着移动效果层用了position: absolute打开 Elements 观察效果层定位改为position: fixed让它固定在视口用户点不到页面上的按钮pointer-events没有设为 none或效果层 z-index 太高在 Elements 中点击某元素查看被遮挡情况给#fxLayer设置pointer-events: none页面停留很久后内存变大粒子没走清理逻辑或 removal 事件监听失败在 Performance 里录制查看 DOM 节点数量是否持续上涨在animationend里removeChild并递减计数器动画开始时一颤一颤CSS 中使用了top/left关键帧动画过程中频繁布局打开 Performance 查看 Layout 事件改为只使用transform和opacity动画用户开了“减弱动态”仍看到大量动画只用 CSS 隐藏粒子但 init 逻辑依然自动运行检查控制台matchMedia结果在 JS init 里判断prefers-reduced-motion不自动开启按钮文本和当前状态对不上暂停/恢复逻辑没有同步写 UI 状态点击后查看按钮文字和 autoTimer在 stop/start 两个函数中统一修改 textContent这些问题的根源都集中在前几节强调的三个点定位方式、指针事件、生命周期管理。大部分情况下绕开这三点就不会跑偏。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 srcimages/photo-01.webp alt1996年冬天姥爷在村口老树下的留影 width960 height720 loadinglazy /显式写宽高是为了避免图片加载前后发生明显布局跳动。使用现代 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 快速验证但团队协作和真实上线前建议用本地服务器与版本管理工具进行常规流程。粒子动画是锦上添花的部分页面内容结构、图片体积、无障碍和基础性能才是真正决定体验的变量。如果你下次再听到类似“页面飘一点什么氛围就好了”的需求把这篇文章的思路调出来直接用一个结构清晰的原型去沟通会比反复讨论文案有效得多。 纯CSS+JS打造网页飘落动画：粒子生命周期与性能优化实践
前几天处理一个页面需求时我遇到了一个很典型的矛盾对方希望页面“看起来有人情味”但又没有给任何现成动画库的预算。需求描述很抽象原文大致是一句话——“在老照片页面上让东西飘一飘最好像风把花瓣和雪吹起来。”这类需求听起来很“感性”落到技术上就是一组非常标准的粒子动效问题粒子什么时候产生、什么时候消失、怎么移动、怎么不挡内容、怎么在低端手机上也不至于卡成幻灯片。“姥爷纷飞”这个名字与其说是一个成品项目不如说是一个动效原型把一组老照片做成纵向回忆墙在页面上方放一层透明的、可点击穿透的飘落效果层让花瓣、雪花或纸屑从顶部飘下。“姥爷纷飞”在这里只承担页头标题与示例命名关键是背后那一套不到两百行的原生 CSS JavaScript 实现。读完这篇文章你不只能复刻这个效果还能理解粒子动画的 DOM 实现思路、性能边界和工程化落点。文章会按这个顺序展开先讲清这类动效适合用哪种技术方案再拆解“粒子一生”的原理接着给出一份可以直接打开运行的前端项目最后补上验证手段、常见坑和工程建议。如果你正在做相册类 H5、博客氛围页、活动落地页或者只是想弄明白“为什么简单的落下动画会卡”这篇文章比较合适。1. “姥爷纷飞”到底是一个怎么样的页面结构先给效果做一个抽象所谓“页面飘落花瓣”其实就是在原有内容之上增加一个装饰层。从页面结构上看整个项目分成三层第一层是普通内容层也就是标题、文字、照片卡片等。这一层要遵守正常的 HTML 文档流用户正常滚动不能被装饰元素挡住交互。第二层是飘落效果层。它是一个相对于视口固定的容器覆盖整个窗口。容器里的每一个“粒子”都是一次独立的小动画。一个粒子从屏幕外出生用几秒到十几秒时间从高处移动到低处动画结束后被移除。第三层是控制逻辑也就是 JavaScript 按节奏向粒子层中添加粒子同时又保证同一时间存在的粒子数量在一个合理范围以内。把“姥爷纷飞”当作一个项目名来拆解很多人容易一上来就去搜索开源的雪景插件。但这类需求的自定义成本其实很低绝大部分情况不需要引一个第三方库。自己实现时重点把握两件事粒子容器必须position: fixed并且pointer-events: none让点击穿透否则页面上的按钮都会失效。粒子到达底部后必须通过animationend事件移除否则页面停留半小时后DOM 里会堆积几千个“已经飘完但未删除”的节点网页最终会被拖垮。这个结构听起来不复杂但它决定了后面所有代码的书写方式。与其把它当成“一个漂亮的特效”不如把它理解成一个“有生命周期的粒子迷你框架”。为了帮你判断自己的业务场景到底该用什么方式实现我先把几种常见技术方案做一个对比。方案实现难度粒子数量上限适合场景主要成本DOM 节点 CSS animation非常低几十到一百左右轻量页面、移动端 H5、快速开发节点创建和移除需要认真管理Canvas 2D 手绘粒子中等几百到上千视觉元素丰富、粒子互相穿插需要自己控制设备像素比和 FPSWebGL / 粒子库高几千甚至更多大屏、重度视觉、游戏化场景学习成本高打包体积大对于“姥爷纷飞”这样一个氛围感原型几十片花瓣加一点雪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 “一个粒子”的一生无论用什么方案粒子系统都有四个阶段诞生运动消亡清理放到本项目里最直接的理解就是诞生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.jsindex.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 langzh-CN head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / title姥爷纷飞 · 家庭时光放映室/title link relstylesheet hrefstyle.css / /head body div classpage header classhero p classeyebrow家庭数字相册 · 动效示例/p h1姥爷纷飞/h1 p classdescription泛黄的旧时光被风一片片吹起又在记忆里落下来。/p div classtoolbar button idtoggleAutoBtn classbtn typebutton暂停自动飘落/button button idwindBtn classbtn typebutton来一阵风/button span classcounter当前粒子span idparticleCount0/span/span /div /header main classalbum article classphoto-card photo-card--one div classphoto-mask photo-mask--field/div div classphoto-caption村口的老树风一吹就是好多年。/div /article article classphoto-card photo-card--two div classphoto-mask photo-mask--room/div div classphoto-caption冬天的窗台有阳光落下来。/div /article article classphoto-card photo-card--three div classphoto-mask photo-mask--river/div div classphoto-caption河边散步的那年日子走得慢。/div /article article classphoto-card photo-card--four div classphoto-mask photo-mask--yard/div div classphoto-caption院子里晒过很多个秋天。/div /article /main /div div idfxLayer classfx-layer aria-hiddentrue/div script srcpetal.js/script /body /html在这份 HTML 里注意两点一是idfxLayer的效果层被放在内容后面避免因为 CSS 层级问题遮住内容二是aria-hiddentrue表示整个装饰层对读屏软件不可见它不传递任何文字信息也不应该影响辅助功能。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 面板找到idfxLayer的 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. 常见问题与排查方法下面列出我在这类动画实践中遇到过的高频问题做成一张排查表方便你保存收藏。问题现象可能原因排查方式解决方案页面没有任何粒子出现脚本在 HTML 之前执行找不到fxLayer或者 JS 报错打开控制台查看 Uncaught 错误确认脚本顺序将 script 放在fxLayer之后或监听DOMContentLoaded粒子出生位置全部集中在同一列只给粒子设置了left: 0%在 Elements 中检查粒子内联样式给left设置一个随机百分比范围如-10%~100%粒子落到一半突然瞬移到底部容器的height小于视口或使用了overflow:hidden却对子元素采用百分比高度定位检查父级#fxLayer是否为 fixed高度是否 100%明确设置position: fixed; width: 100%; height: 100%页面上下滚动时粒子层跟着移动效果层用了position: absolute打开 Elements 观察效果层定位改为position: fixed让它固定在视口用户点不到页面上的按钮pointer-events没有设为 none或效果层 z-index 太高在 Elements 中点击某元素查看被遮挡情况给#fxLayer设置pointer-events: none页面停留很久后内存变大粒子没走清理逻辑或 removal 事件监听失败在 Performance 里录制查看 DOM 节点数量是否持续上涨在animationend里removeChild并递减计数器动画开始时一颤一颤CSS 中使用了top/left关键帧动画过程中频繁布局打开 Performance 查看 Layout 事件改为只使用transform和opacity动画用户开了“减弱动态”仍看到大量动画只用 CSS 隐藏粒子但 init 逻辑依然自动运行检查控制台matchMedia结果在 JS init 里判断prefers-reduced-motion不自动开启按钮文本和当前状态对不上暂停/恢复逻辑没有同步写 UI 状态点击后查看按钮文字和 autoTimer在 stop/start 两个函数中统一修改 textContent这些问题的根源都集中在前几节强调的三个点定位方式、指针事件、生命周期管理。大部分情况下绕开这三点就不会跑偏。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 srcimages/photo-01.webp alt1996年冬天姥爷在村口老树下的留影 width960 height720 loadinglazy /显式写宽高是为了避免图片加载前后发生明显布局跳动。使用现代 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 快速验证但团队协作和真实上线前建议用本地服务器与版本管理工具进行常规流程。粒子动画是锦上添花的部分页面内容结构、图片体积、无障碍和基础性能才是真正决定体验的变量。如果你下次再听到类似“页面飘一点什么氛围就好了”的需求把这篇文章的思路调出来直接用一个结构清晰的原型去沟通会比反复讨论文案有效得多。