克制的网页动效灵感
已收录 -- 种经典与现代网页动效，提供一键复制的 AI 开发提示词。
动效设计与 AI 提示词常见问题
探索如何将克制动效哲学融入现代 Web 与前端工程实践
为什么强调“克制的动效设计”？
动效的本质是降低用户的认知负荷，引导视觉焦点并传递界面的状态变化。过度的炫技往往导致性能卡顿与视觉疲劳。克制动效以 150ms-400ms 的自然过渡为主，让交互如呼吸般自然顺畅。
如何搭配 Claude / Cursor / DeepSeek 等 AI 编程工具使用？
每个动效卡片均附带经过严谨调优的 AI 提示词。点击卡片右下角或详情页中的“一键复制”，直接粘贴到 Cursor Agent、Claude 或 ChatGPT 聊天框中，AI 即可根据提示词精准生成符合工程规范的原生 CSS / JS / React 动效代码。
如何处理无障碍（a11y）与减少动态需求？
本项目全量适配了 @media (prefers-reduced-motion: reduce) 媒体查询。当用户在操作系统中开启“减少动态效果”时，所有视差、缩放与旋转动效会自动平滑降级为静态展示，保护敏感人群的浏览体验。