← 全部模板

漂浮几何封面 <FloatCover />

居中的超大标题,下面一张数字卡片,四个 CSS 画的 3D 球体、立方体、圆环、胶囊漂浮在周围,背后一条巨字跑马灯缓缓横移。几何风格的招牌封面。

在示例演示里查看 →

分组
开场 · 品牌或发布会第 1 页
组件
FloatCover · #float-cover

适合

  • 发布会、品牌介绍的封面
  • 有一个能代表这次主题的数字

不适合

  • 正式汇报:用 Cover
  • 没有合适的数字:用 HangingCover

内容上限

1title ≤ 2 行 × 7 字
2lead ≤ 40 字
3card.value ≤ 8 字符,card.note ≤ 24 字
4marquee ≤ 10 字符,只重复页面上已有的词

字段

字段类型
kicker · 必填string小节名,2–8 字
title · 必填string | string[]标题;数组手动断行
leadstring一两句导语,≤ 60 字
sourcestring事实出处
marquee · 必填string跑马灯里重复的词
card · 必填{ label, value, note }中间的数字卡片
shapesShapeSpec[]覆盖默认的四个几何体位置

示例代码

<FloatCover
  kicker="第 3 期 · 2026 年 10 月"
  title={['给演示加点', '立体的玩具']}
  marquee="SLIDEHTML"
  card={{ label: 'TEMPLATES', value: '103', note: '模板总数' }}
/>