><frame id="hero-intro-01" ><button class="btn-ripple">/* 1. 所有帧默认隐藏 */ .btn-ripple frame { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; transition: opacity 0.15s ease-out, transform 0.2s cubic-bezier(0.2, 0.8, 0.4, 1); } /* 2. 根据按钮状态，显示对应帧 */ .btn-ripple[data-ripple-state="idle"] frame[data-state="idle"] { opacity: 1; transform: scale(0.8); } .btn-ripple[data-ripple-state="expanding"] frame[data-state="expanding"] { opacity: 0.7; transform: scale(1.4); } .btn-ripple[data-ripple-state="fading"] frame[data-state="fading"] { opacity: 0; transform: scale(1.8); } /* 3. 利用 :has() 实现“鼠标移入即触发”（Chrome 105+ / Safari 15.4+）*/ .btn-ripple:has(:hover) { --ripple-state: expanding; } /* 4. 用自定义属性驱动状态（兼容老浏览器）*/ .btn-ripple { --ripple-state: idle; } .btn-ripple[data-ripple-state="expanding"] { --ripple-state: expanding; } /* 5. 最终，用属性选择器映射到帧 */ .btn-ripple frame[data-state="expanding"] { opacity: calc(var(--ripple-state) == 'expanding' ? 0.7 : 0); }这里的关键技巧是：用>// 点击时只需切换按钮的 data 属性 button.addEventListener('click', () => { button.setAttribute('data-ripple-state', 'expanding'); // 150ms 后切到 fading setTimeout(() => { button.setAttribute('data-ripple-state', 'fading'); }, 150); });提示：Safari 对:has()支持较晚，生产环境建议用>{ "source": "hero-intro.mp4", "totalFrames": 48, "durationMs": 4800, "fps": 10.0, "frames": [ { "id": "hero-intro-01", "index": 1, "timestampMs": 0, "file": "hero-intro-01.png", "hash": "a1b2c3d4e5f6...", "width": 1440, "height": 810, "isKeyframe": true } ] } 第5层：HTML/CSS 模板注入
根据 manifest 自动生成： index.html：含<frame>结构、<script>初始化逻辑；style.css：含基础.frame-container样式、># 卸载旧版 sudo apt remove nodejs npm # 安装 nvm curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash source ~/.bashrc # 安装 Node.js 18.17.0 nvm install 18.17.0 nvm use 18.17.0 # 全局安装 CLI（注意：不用 sudo） npm install -g hyperframes-cli问题2：FFmpeg 缺失导致 import 失败
CLI 在import时调用 FFmpeg，若未安装会报错Error: spawn ffmpeg ENOENT。 ✅ Ubuntu 一键安装（含 H.265 支持）： sudo apt update sudo apt install -y ffmpeg libavcodec-extra # 验证 ffmpeg -version | head -n1 # 应输出 "ffmpeg version 4.4.2-0ubuntu0.22.04.1"
问题3：Sharp 图像处理库编译失败
npm install时出现gyp ERR! build error，主因是缺少 Python 和构建工具。 ✅ 完整依赖安装： sudo apt install -y python3 build-essential # 设置 npm 使用 Python3 npm config set python python3
注意：不要用sudo npm install -g！这会导致权限混乱，后续hyperframes build时写入dist/目录失败。所有操作均以当前用户身份执行。
4.2 创建项目与导入 MP4：实操命令与参数详解假设你已有一段zombie-click.mp4（植物大战僵尸风格的僵尸被点击后晃动、变灰、倒地的 3 秒动画），分辨率为 1280×720，FPS 为 24。 步骤1：初始化项目 # 创建项目目录（名称即动效 ID） hyperframes init zombie-click # 进入目录 cd zombie-click
CLI 会生成： src/：存放原始 MP4、PNG 的目录src/index.html：基础 HTML 模板src/style.css：基础 CSS 模板package.json：含scripts如"build": "hyperframes build"
步骤2：导入 MP4（关键参数说明） hyperframes import ../design/zombie-click.mp4 \ --fps=12 \ --output-dir ./src/frames/ \ --resize="1440x810" \ --quality=92 \ --no-webp
参数详解： --fps=12：目标帧率。原视频 24fps，取一半保证流畅且减小体积；--output-dir：指定 PNG 输出路径，必须是src/frames/（CLI 约定）；--resize="1440x810"：强制重采样到热搜词指定的宽高，CLI 内部用sharp.resize()保持宽高比，不足处加黑边；--quality=92：PNG 压缩质量，92 是平衡清晰度与体积的最佳值（实测 90-94 区间体积差异 < 3%，但 85 以下出现明显色带）；--no-webp：禁用 WebP 备份（因热搜词中未提 WebP，且部分老安卓机不支持）。
执行后，CLI 输出： ✅ Analyzed video: 3.2s, 24fps, H.264 ✅ Extracted 38 frames (I-frame priority) ✅ Resized to 1440x810, quality 92 ✅ Generated manifest: src/frames/frames-manifest.json ✅ Updated HTML template
此时src/frames/下已有zombie-click-01.png到zombie-click-38.png，frames-manifest.json记录了每帧时间戳。 4.3 HTML 结构编写：如何让“僵尸倒地”动效可点击、可复用？src/index.html是 CLI 生成的模板，我们需要手动增强其交互性。核心是添加><!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="zombie-container">/* 1. 容器基础样式 */ .zombie-container { position: relative; width: 1440px; height: 810px; margin: 0 auto; overflow: hidden; } .zombie-base { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } /* 2. 所有帧通用样式 */ .zombie-container frame { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; /* 启用 GPU 加速 */ will-change: transform, opacity; } /* 3. idle 状态：仅显示底图，帧全透明 */ .zombie-container[data-zombie-state="idle"] frame[data-state="idle"] { opacity: 1; transform: translateX(0) rotateX(0) translateY(0) grayscale(0%); } /* 4. shaking 状态：快速左右晃动 + 轻微变灰 */ .zombie-container[data-zombie-state="shaking"] frame[data-state="shaking"] { opacity: 1; /* 使用 CSS @keyframes 实现晃动，避免 JS 计算 */ animation: zombie-shake 0.4s ease-in-out infinite; animation-iteration-count: 5; /* 晃动 5 次 */ grayscale: 20%; } @keyframes zombie-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-8px); } 50% { transform: translateX(8px); } 75% { transform: translateX(-4px); } } /* 5. fallen 状态：倒地 + 完全变灰 + 透明度渐隐 */ .zombie-container[data-zombie-state="fallen"] frame[data-state="fallen"] { opacity: 1; animation: zombie-fall 0.8s cubic-bezier(0.2, 0.6, 0.4, 1); grayscale: 100%; } @keyframes zombie-fall { 0% { transform: translateX(0) rotateX(0) translateY(0); } 50% { transform: translateX(-15px) rotateX(30deg) translateY(120px); } 100% { transform: translateX(0) rotateX(90deg) translateY(200px); opacity: 0; } } /* 6. 响应式适配：小屏幕缩小容器 */ @media (max-width: 768px) { .zombie-container { width: 100vw; height: 56.25vw; /* 16:9 */ } }
实操心得：animation-iteration-count: 5比animation: shake 2s更可控——前者明确执行 5 次，后者受 FPS 影响可能执行 4 或 6 次。在动效设计中，“次数”比“时长”更可靠。
4.5 构建与部署：hyperframes build的产物结构与 Nginx 配置执行npm run build（即hyperframes build）后，CLI 生成dist/目录，结构如下： dist/ ├── index.html # 最终 HTML，已注入所有 <frame> 和内联 CSS ├── frames/ # 所有 PNG 帧（重命名后） │ ├── zombie-click-01.png │ ├── zombie-click-02.png │ └── ... ├── style.css # 构建后的 CSS（含所有 @keyframes） └── manifest.json # 构建元数据（版本、时间戳、哈希）
Nginx 部署关键配置（/etc/nginx/sites-available/hyperframes）： server { listen 80; server_name your-domain.com; root /var/www/hyperframes/dist; index index.html; # 重要：启用 gzip 压缩 PNG（体积减少 40%+） gzip on; gzip_types image/png image/webp; # 缓存静态资源（PNG/CSS/HTML） location / { try_files $uri $uri/ /index.html; } # 针对 PNG 的强缓存（1 年） location ~* \.(png|webp)$ { expires 1y; add_header Cache-Control "public, immutable"; } # 防止 HTML 被缓存（每次更新都需重新加载） location ~* \.html$ { expires -1; add_header Cache-Control "no-cache, no-store, must-revalidate"; } }
提示：`add_header
RELATED READING 延伸阅读 更多一线实战笔记与深度复盘，助您持续精进
|
