Motion-Driven · 2020s 现代

滚动一寸，
叙事一层

以运动承载信息层级：滚动揭示逐段展开内容，3–5 层视差营造纵深，全部入场动画在 300–400ms 内以 transform / opacity 完成，GPU 加速、丝滑不掉帧。

向下滚动体验 加入体验计划
类别General 通用风格
年代2020s 现代
复杂度High 高
最适合作品集 / 叙事网站 / 互动体验 / 创意 SaaS

风格特性

动效不是装饰，而是导航：它告诉用户「你在哪、发生了什么、接下来看哪」。

滚动揭示

IntersectionObserver 监听视口，元素进入时上浮淡入，配合 80ms 级联延迟形成节奏感。

3–5 层视差

光球、圆环、几何块与点阵以不同速度随滚动位移，用相对运动构建空间纵深。

300–400ms 入场

所有过渡仅用 transform 与 opacity，will-change 提示合成层，动画时长严格控制在 300–400ms。

按钮与控件

悬停上浮、按压回弹、状态色反馈——每个控件都有明确的运动语言。

GPU 加速 成功 #22C55E 错误 #EF4444 反馈色取自过渡状态规范

表单示例 · 加入体验计划

聚焦时输入框亮起焦点环并轻微浮起，提交按钮以动势引导视线。

配色板

高对比的运动主色 + 语义化反馈色：颜色也在为动效叙事。

动势靛蓝#4F46E5
动感品红#D946EF
深品紫#A21CAF
成功绿#22C55E
错误红#EF4444
墨蓝黑#14162B

字体级阶

显示级 · Space Grotesk 700 · 44px

让页面动起来

标题 · Space Grotesk 600 · 28px

滚动即叙事，运动即层级

正文 · Inter 400 · 16px

动效驱动的界面以运动传达因果与空间关系，入场、悬停与过渡共同构成一套可被感知的节奏系统。

标签 · Inter 600 · 13px · 字距 0.14em

Motion-Driven · 动效驱动