INTERACTION / 交互动效设计
轻量·细腻·克制的网页动效
动效不是炫技，而是引导视线、反馈操作、串联叙事的工具。我们用纯原生语法实现六类轻量动效，无第三方依赖，性能开销极低，让页面在呼吸中传神，在细节中见功力。
MOTION TYPES / 动效六类
六类动效，各司其职
每一类动效都有明确的职能边界，按页面需求组合使用。所有动效均纯原生实现，尊重 prefers-reduced-motion 偏好，无障碍友好。
MOTION 01
滚动渐入
元素随滚动进入视口时淡入上移，建立自上而下的阅读节奏。支持分级延迟，让信息按层级依次登场，告别一坨糊在首屏。
MOTION 02
hover 反馈
按钮、卡片、链接在悬停时给出色彩与位移反馈，让可点击区域一目了然。过渡曲线统一，反馈瞬时但不突兀。
MOTION 03
视差滚动
背景与前景以不同速率滚动，营造层次纵深感。克制使用，只在首屏与专题页关键节点出现，避免晕眩与性能负担。
MOTION 04
轮播切换
焦点图、案例展示、客户证言的轮播切换动效，支持自动播放与手动控制，过渡丝滑无闪烁，触控滑动跟手。
MOTION 05
抽屉展开
移动端侧栏抽屉、FAQ 折叠面板、筛选条件展开收起，统一采用高度过渡，开合顺滑，状态可记忆，避免布局抖动。
MOTION 06
微交互反馈
表单提交、点赞收藏、复制成功等操作的微反馈，用色彩与图标瞬时回应，让每一次操作都被看见，建立信任感。
MOTION 01
// 01 动效实现原则
原生实现，性能与无障碍并重
所有动效都用原生 CSS transition 与 IntersectionObserver 实现，不引入 GSAP、AOS 等动效库。优先操作 transform 与 opacity，避免触发重排，60fps 稳定运行。同时尊重系统的减少动态偏好设置，让晕眩敏感用户也能舒适浏览。
- 纯原生 CSS + IntersectionObserver，零依赖
- 仅操作 transform/opacity，60fps 不卡顿
- 支持 prefers-reduced-motion 无障碍偏好
- 移动端动效精简，触控跟手不延迟
让页面动起来，但不喧宾夺主
原生实现 · 性能优先 · 无障碍友好