企业官网建设流程全解析

• AI 技能/插件
• 前端

本篇基于 references/animations.md 这份官方动画目录，完整拆解 html-ppt-skill 项目的动画体系：27 种通过data-anim/anim-*类名驱动的一次性 CSS 入场动画，以及 20 种由 assets/animations/fx-runtime.js 自动管理生命周期的 Canvas 特效。读完本文，你可以为任意静态 HTML 幻灯片挑选并正确接入入场动效、数字滚动计数器和 SVG 描边绘制，并理解 runtime 如何在每次切页时自动重触发动画、Canvas FX 如何跟随幻灯片激活/离开自动启停。

1. 两种接入方式：class 与><!-- 方式一：静态类名，页面加载即播放一次 --> <p class="anim-fade-up">默认段落入场</p> <!-- 方式二：data-anim 属性，推荐 --> <p>// re-trigger entry animations slides[n].querySelectorAll('[data-anim]').forEach(el => { const a = el.getAttribute('data-anim'); el.classList.remove('anim-'+a); void el.offsetWidth; // 强制回流，让动画状态归零 el.classList.add('anim-'+a); });

也就是说：class="anim-..."是 fire-and-forget，元素首次出现时播一次；data-anim="..."则会在你每次进入该幻灯片时重新播放入场效果。对于“观众可能来回翻页”的场景，data-anim能保证动画节奏始终跟随当前页。

另外，runtime 内置了一个 27 项的ANIMS数组（assets/runtime.js），在任意页按A键会循环给当前页换装随机动画，演示时会看到动画名显示在.anim-indicator上（assets/runtime.js）。它还会优先选中带有data-anim-target属性的元素作为动画目标，因此想控制“整页动”还是“标题动”，给目标元素加上data-anim-target即可——templates/animation-showcase.html 中每一个 CSS 动画演示格正是这么写的。

全局时长与缓动由两个 CSS 变量控制（assets/animations/animations.css）：

:root { --anim-dur: .7s; --anim-ease: cubic-bezier(.4,0,.2,1) }

需要更快的节奏时，在单个元素上覆写--anim-dur即可，无需改动任何类名。

2. CSS 入场动画全集（27 种）

以下六类目录完整继承自原文档，表格右侧补充了 assets/animations/animations.css 中对应的关键帧细节，便于你判断每种动画的实际观感。

2.1 方向性淡入（Directional fades）

四个方向动画共用同一组变量，是成本最低的一组，适合整页统一节奏。

2.2 戏剧化入场（Dramatic entries）

glitch-in的观感来自 5 段clip-path: inset(...)逐帧变化配合 ±2~6 px 的水平抖动（assets/animations/animations.css），是 cyberpunk-neon、terminal-green 等主题下最有辨识度的标题入场。

2.3 文本特效（Text effects）

注意neon-glow、shimmer-sweep、gradient-flow是无限循环动画，与前几组的“一次性入场”语义不同——它们适合放在 hero 元素上持续存在，而不是逐页重播。

2.4 列表与数字（Lists & numbers）

stagger-list的错峰节奏由 9 条nth-child延迟规则构成（0.05s 起步，0.1s 步进，第 9 项起统一 0.85s），见 assets/animations/animations.css。使用方式：

<ul class="anim-stagger-list"><span class="counter"><svg class="anim-path-draw" viewBox="0 0 300 200"> <path d="M20,100 L140,100 L180,40" fill="none" stroke="var(--accent)" stroke-width="3"/> </svg>

2.6 3D 与透视（3D & perspective）

2.7 氛围型 / 持续型（Ambient / continuous）

confetti-burst完全由两个伪元素的box-shadow点阵构成（assets/animations/animations.css），颜色取自--accent/--accent-2/--good/--warn/--bad，无需任何 JS；想要真正的粒子效果请看下一节的 Canvas FXconfetti-cannon。

3. 尊重用户的减少动效偏好

assets/animations/animations.css 末尾有一段全局兜底：

@media (prefers-reduced-motion: reduce){ [class*="anim-"]{animation:none!important;transition:none!important} }

当系统开启prefers-reduced-motion: reduce时，所有anim-*动画与相关过渡自动关闭，元素直接以最终状态呈现。原文档明确要求：不要覆写这段规则——这是无障碍合规的底线，覆写会导致前庭功能障碍用户在翻页时看到剧烈运动。

4. 单页动画搭配技巧（官方 Tips）

原文档给出的四条实践原则，直接照抄进你的写作流程：

• 优先用data-anim="..."而非class="anim-..."，这样 runtime 在每次页面激活时都会重触发；
• 单页最多 1–2 种不同的动画类型，混用 5 种会显得杂乱；
• stagger-list + 一个 hero 入场是干净的节奏公式（例如标题rise-in+ 要点列表stagger-list）；
• counter-up 请搭配templates/single-page/stat-highlight.html 或 templates/single-page/kpi-grid.html 布局使用。

5. Canvas FX：持续运行的 20 种特效

CSS 动画是“触发一次就走”的入场效果，而FX是持续运行的 canvas/DOM 特效：它们在自己的幻灯片激活时启动、离开时停止，生命周期由 assets/animations/fx-runtime.js 全自动管理。FX 模块源码全部位于 assets/animations/fx/ 目录。

5.1 接入方式

第一步，页面引入 FX runtime（相对路径按你的 deck 所在深度取../、../../或../../../，与页面中引用其他assets/资源的深度保持一致）：

<script src="../assets/animations/fx-runtime.js"></script>

第二步，在任意 slide 内放一个带尺寸的容器：

<div><!-- letter-explode：指定要炸开的大字 --> <div>./scripts/render.sh templates/animation-showcase.html # 整份 showcase 逐页出 PNG ./scripts/render.sh examples/demo-deck/index.html 12 # 导出前 12 页

scripts/verify-output/animation-showcase/ 目录中保留了一批 1920×1080 的基准截图，可作为动画在标准渲染器下的观感参照：

7. 关键文件索引

要点回顾：入场效果用data-anim（可随翻页重播），列表用stagger-list，数字用counter-up（data-to/data-dur），SVG 自绘把类名加在<svg>上；持续氛围效果用data-fx容器（必须给高度，自动吃主题色、自动启停）。单页 1–2 种动画、尊重prefers-reduced-motion，是这套体系保持“专业感”的三条纪律。

• AI 技能/插件
• 前端