动效驱动Motion-Driven
把滚动、悬停与转场当作主要叙事手段：视差分层、入场编排、状态连续过渡。观感流畅，但要为 reduced-motion 与低端设备准备静态版本。
典型场景品牌官网 · 产品发布 · 互动叙事
编号15
年代2020s Modern
复杂度High
默认模式自动
效果示例
Nova
产品方案定价
开始使用
Design System
同一套组件
不同的性格
色彩、字体、圆角与材质，决定了界面的气质。
主要操作次要操作
标签 A标签 B+12
月度增长
+24.8%
转化率4.2%
客单价¥328
Aa Bb Cc 0123
按钮 / ButtonPrimaryGhost
输入 / Inputname@example.com
标签 / Chip已选中默认+8
进度 / Progress
开关 / Switch
数值 / Numeric1,284.50
同一副骨架，演示色彩、字体、圆角、描边、阴影与材质。明暗切换展示该风格在两种模式下的令牌表现。
风格描述
把滚动、悬停与转场当作主要叙事手段：视差分层、入场编排、状态连续过渡。观感流畅，但要为 reduced-motion 与低端设备准备静态版本。
关键词
Animation-heavymicrointeractionssmooth transitionsscroll effectsparallaxentrance animpage transitions
效果与动效
Scroll anim (Intersection Observer), hover (300-400ms), entrance, parallax (3-5 layers), page transitions
设计系统变量
--animation-duration300-400ms--parallax-layers5--scroll-behaviorsmooth--gpu-acceleratedtrue--entrance-animationtrue--page-transitionsmooth配色方案
色值取自风格数据，不足时补充主题令牌主色 / Primary
Bold colors emphasize movement, high contrast animated, dynamic gradients, accent action colors
辅色 / Secondary
Transitional states, success (Green #22C55E), error (Red #EF4444), neutral feedback
强调色在页面底色上的对比度约 3.5:1，适合大字与图形，正文需另配深色。
适用场景
适合 / Best For
- Portfolio sites
- storytelling platforms
- interactive experiences
- entertainment apps
- creative
- SaaS
避开 / Do Not Use For
- Data dashboards
- critical accessibility
- low-power devices
- content-heavy
- motion-sensitive
框架兼容
gsapframer-motion
能力矩阵
浅色模式支持
深色模式支持
移动适配可适配
转化导向强High
渲染成本低无额外开销
无障碍风险需实测contrast-text-4.5 / keyboard / visible-focus / reduced-motion
实现要点
落地清单
- Scroll animations active,
- Parallax 3-5 layers,
- Entrance animations smooth,
- Page transitions fluid,
- GPU accelerated,
- Prefers-reduced-motion respected
CSS / 技术关键词
animation: @keyframes scroll-reveal, transform: translateY/X, Intersection Observer API, will-change: transform, scroll-behavior: smooth, animation-duration: 300-400ms
AI 提示词
Build an animation-heavy interface with scroll-triggered animations, microinteractions, parallax scrolling (3-5 layers), smooth transitions (300-400ms), entrance animations, page transitions. Use Intersection Observer for scroll effects, transform for performance, GPU acceleration.