AI 技能/插件前端【免费下载链接】html-ppt-skillHTML PPT Studio — AgentSkill with 24 themes, 31 layouts, 20 animations for building professional HTML presentations项目地址https://gitcode.com/gh_mirrors/ht/html-ppt-skill点击查看免费下载本篇基于 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 classanim-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); });也就是说classanim-...是 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 fadesname效果适用场景源码要点fade-up自 32 px 上移淡入段落、卡片的默认入场kf-fade-up默认时长--anim-durfade-down自 -32 px 下移淡入页头、横幅、calloutkf-fade-downfade-left自 -40 px 左移淡入双栏布局的左栏kf-fade-leftfade-right自 40 px 右移淡入双栏布局的右栏kf-fade-right四个方向动画共用同一组变量是成本最低的一组适合整页统一节奏。2.2 戏剧化入场Dramatic entriesname效果适用场景源码要点rise-in60 px 上浮 去模糊blur 6px → 0 轻微缩放 0.97→1页标题、hero 大字kf-rise时长 0.9sdrop-in-60 px 下落 轻微缩放横幅、告警条kf-drop0.8szoom-pop缩放 0.6 → 1.04 → 1过冲回弹按钮、统计数字、CTAcubic-bezier(.22,1.3,.36,1)弹性曲线blur-in18 px 模糊逐步消散封面页揭示kf-blur0.8sglitch-inclip-path 阶梯裁切 左右抖动科技 / 赛博 / 错误状态kf-glitchsteps(5,end)制造跳变感glitch-in的观感来自 5 段clip-path: inset(...)逐帧变化配合 ±2~6 px 的水平抖动assets/animations/animations.css是 cyberpunk-neon、terminal-green 等主题下最有辨识度的标题入场。2.3 文本特效Text effectsname效果适用场景源码要点typewriter等宽风格的逐字揭示 闪烁光标一句话口号、sloganwidth:0 → 100%steps(40,end)光标用border-right闪烁2.4sneon-glowtext-shadow 周期性脉冲terminal-green / dracula 主题--accent色光晕 2s 无限循环shimmer-sweep白色高光斜向扫过110° 渐变 ::after 伪元素金属感按钮、premium 卡片translateX(-100% → 100%)2.4s 循环gradient-flow90° 水平渐变文字无限滚动品牌字标background-clip: text--accent / --accent-2 / --accent-3三色注意neon-glow、shimmer-sweep、gradient-flow是无限循环动画与前几组的“一次性入场”语义不同——它们适合放在 hero 元素上持续存在而不是逐页重播。2.4 列表与数字Lists numbersname效果适用场景stagger-list子元素逐个 rise-in任意ul或.gridcounter-up数字从 0 滚动到目标值KPI、stat-highlight 页stagger-list的错峰节奏由 9 条nth-child延迟规则构成0.05s 起步0.1s 步进第 9 项起统一 0.85s见 assets/animations/animations.css。使用方式ul classanim-stagger-list>span classcounter>svg classanim-path-draw viewBox0 0 300 200 path dM20,100 L140,100 L180,40 fillnone strokevar(--accent) stroke-width3/ /svg2.6 3D 与透视3D perspectivename效果适用场景源码要点parallax-tilthover 时 3D 倾斜perspective 900pxhero 卡片、产品截图唯一的 hover 交互型非入场card-flip-3dY 轴 -90° → 0 翻转前后对比揭示backface-visibility: hiddencube-rotate-3d从立方体侧面旋入章节分隔页1spage-turn-3d左侧铰链翻页transform-origin: left center编辑风 / 叙事流1sperspective-zoom从 Z -400 px 处拉出 12° 俯仰封面开场1s2.7 氛围型 / 持续型Ambient / continuousname效果适用场景源码要点marquee-scroll无限水平循环translateX 0 → -50%客户 logo 条20s linear需内容复制两份kenburns图片 14s 慢速缩放1 → 1.15 倍 微平移hero 背景图infinite alternateconfetti-burst伪元素光点爆发纯 CSSbox-shadow 多色点阵Thanks / 成功页1.2s双伪元素错峰 0.15sspotlight圆形 clip-path 从中心扩散揭示重大揭示时刻circle(0% → 140%)1.1sripple-reveal从左下角20% 80%起涟漪揭示章节转场1.2sconfetti-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...而非classanim-...这样 runtime 在每次页面激活时都会重触发单页最多 1–2 种不同的动画类型混用 5 种会显得杂乱stagger-list 一个 hero 入场是干净的节奏公式例如标题rise-in 要点列表stagger-listcounter-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. 关键文件索引文件作用references/animations.md本文的官方目录底本27 CSS 20 FX 全表assets/animations/animations.css27 个命名 CSS 入场动画的全部关键帧与类名定义assets/runtime.js键盘运行时data-anim重触发、counter-up 计数逻辑、A 键换装assets/animations/fx-runtime.jsFX 自动加载器与幻灯片激活/停止生命周期管理assets/animations/fx/_util.js共享基建canvas 自适应 DPR、主题色板读取、rAF 循环assets/animations/fx/20 个 FX 模块源码templates/animation-showcase.html每种动画一页的实时浏览 deckscripts/render.shheadless Chrome PNG 导出要点回顾入场效果用data-anim可随翻页重播列表用stagger-list数字用counter-updata-to/data-durSVG 自绘把类名加在svg上持续氛围效果用data-fx容器必须给高度自动吃主题色、自动启停。单页 1–2 种动画、尊重prefers-reduced-motion是这套体系保持“专业感”的三条纪律。赞分享AI 技能/插件前端【免费下载链接】html-ppt-skillHTML PPT Studio — AgentSkill with 24 themes, 31 layouts, 20 animations for building professional HTML presentations项目地址https://gitcode.com/gh_mirrors/ht/html-ppt-skill点击查看免费下载相关推荐html-ppt动效系统深度解析27种CSS入场动画20种Canvas特效全目录与使用场景html ppt动效系统深度解析27种CSS入场动画20种Canvas特效全目录与使用场景 html pptHTML PPT Studio是一款开源的纯AI 技能/插件前端PPT Master 动画系统实战指南原生 PowerPoint 转场与对象动画的完整控制PPT Master 动画系统实战指南原生 PowerPoint 转场与对象动画的完整控制 PPT Master 将 页面转场 与可选的 元素级对象动画 写为AI 技能人工智能AI 应用12种优雅CSS加载动画SpinKit完整使用指南12种优雅CSS加载动画SpinKit完整使用指南 SpinKit是一个轻量级的CSS加载动画库提供了12种精美的纯CSS实现的加载指示器无需JavaScUI组件上一篇5ire终极跨平台AI助手完整指南 - 一站式解决MCP工具集成下一篇Python办公自动化终极指南一键解锁高效办公新境界创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考