Back to Details

frame-logo-outro

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese
【模板: Logo 收尾帧 (Logo Outro)】 【意图】视频结尾的品牌 reveal 帧 —— logo 分块拼装 + glow bloom + tagline 上浮 + CTA。Inspired by hyperframes logo-outro。
【画布】1920×1080, 黑色 
#08090c
或品牌深色背景; 加微妙 vignette 
radial-gradient(...)
让中心更亮。
【布局】
  • 中心 Logo: 用 CSS / 内联 SVG 绘制; 由 4-8 个几何块 (圆 / 方 / 三角 / hairline) 组成。
    • 入场动画: 每个块从屏幕外滑入 (±100px 不同方向) + scale 1.4→1.0 + opacity 0→1, 错峰 80ms; 总时长 1.2s。
    • 入场完成后, 整个 logo 加 glow bloom: 
      filter: drop-shadow(0 0 24px <accent>40)
      ; 同时一道 shimmer 
      mask-image
      横扫 logo (500ms)。
  • 品牌名: logo 下方 6-8% 位置, 大字 (Inter Tight / SF Pro Display, 48-72px, weight 700, letter-spacing -0.02em), 入场: typewriter or fade-up after logo bloom (1.4s 开始)。
  • Tagline: 品牌名下方一行 (24-28px, weight 400, opacity 0.7), fade in (1.8s)。
  • 底部 CTA + 元数据: 双行底部 row, 例如 
    htmlanything.dev · @htmlanything · 2026
    , 11px uppercase letter-spacing 0.16em, 颜色 opacity 0.4, hairline 分隔。
【调色 — 4 选 1, 不混用】
  • 🌌 Midnight Indigo — bg 
    #08090c
    , accent 
    #7c5cff
    (霓虹紫蓝 glow)。
  • 🌅 Solar Amber — bg 
    #0e0a08
    , accent 
    #ffb547
    (暖琥珀)。
  • 🌿 Forest Mint — bg 
    #0a1410
    , accent 
    #5fb38a
    (薄荷绿)。
  • ⚪ Bone & Ink — bg 
    #f1efea
    , accent 
    #0a0a0b
    (无 neon, 走 editorial 风, glow 改成阴影)。
【设计细节】
  • 绝不: 用外链 logo 图片; logo 必须用纯 CSS / 内联 SVG 几何绘制。
  • 入场动画用 
    @keyframes
    + 
    animation-delay
    ; 可被 
    prefers-reduced-motion
    关闭。
  • 字体: 西文 
    Inter Tight
    / 
    SF Pro Display
    / 
    Manrope
    ; 中文 
    Noto Sans SC
    weight 700。
  • 必须用用户提供的品牌名 + tagline; 若没有, 跑 fallback "HTML Anything" / "Anything → beautiful HTML"。
  • 单文件 HTML; 整个动画完成后 freeze (不要 loop, 这是视频结尾帧)。
  • 顶部可选 5px ribbon (accent 色) 增加品牌识别。
【模板：Logo收尾帧（Logo Outro）】 【意图】视频结尾的品牌展示帧——Logo分块拼装+Glow Bloom发光效果+标语上浮+行动号召按钮（CTA）。灵感来源于hyperframes的logo-outro。
【画布】1920×1080分辨率，黑色
#08090c
或品牌深色背景；添加微妙的暗角效果
radial-gradient(...)
让中心区域更突出。
【布局】
  • 中心Logo：使用CSS/内联SVG绘制；由4-8个几何块（圆形/方形/三角形/细线）组成。
    • 入场动画：每个块从屏幕外滑入（不同方向偏移±100px）+缩放从1.4→1.0+透明度从0→1，错峰80ms启动；总时长1.2s。
    • 入场完成后，整个Logo添加Glow Bloom效果：
      filter: drop-shadow(0 0 24px <accent>40)
      ；同时一道闪光效果
      mask-image
      扫过Logo（时长500ms）。
  • 品牌名：位于Logo下方6-8%位置，使用大号字体（Inter Tight/SF Pro Display，48-72px，字重700，字符间距-0.02em），入场动画：在Logo发光效果后（1.4s时开始）采用打字机效果或淡入上浮。
  • 标语（Tagline）：位于品牌名下方一行（24-28px，字重400，透明度0.7），淡入动画（1.8s时开始）。
  • 底部行动号召（CTA）+元数据：底部双行布局，例如
    htmlanything.dev · @htmlanything · 2026
    ，11px大写字母，字符间距0.16em，颜色透明度0.4，用细线分隔。
【调色——4选1，请勿混用】
  • 🌌 午夜靛蓝 —— 背景
    #08090c
    ，强调色
    #7c5cff
    （霓虹紫蓝发光）。
  • 🌅 琥珀暖阳 —— 背景
    #0e0a08
    ，强调色
    #ffb547
    （暖琥珀色）。
  • 🌿 森林薄荷 —— 背景
    #0a1410
    ，强调色
    #5fb38a
    （薄荷绿）。
  • ⚪ 骨白墨黑 —— 背景
    #f1efea
    ，强调色
    #0a0a0b
    （无霓虹效果，走编辑风格，将发光改为阴影）。
【设计细节】
  • 禁止：使用外链Logo图片；Logo必须用纯CSS/内联SVG几何绘制。
  • 入场动画使用
    @keyframes
    +
    animation-delay
    ；可被
    prefers-reduced-motion
    关闭。
  • 字体：西文采用
    Inter Tight
    /
    SF Pro Display
    /
    Manrope
    ；中文采用
    Noto Sans SC
    ，字重700。
  • 必须使用用户提供的品牌名+标语；若未提供，默认使用“HTML Anything”/“Anything → beautiful HTML”。
  • 单文件HTML；动画完成后定格（不要循环，这是视频结尾帧）。
  • 顶部可选添加5px强调色丝带，增强品牌辨识度。