01 / 03

试试效果，再复制提示词。

三个可以直接操作的示例

同一张卡片，
换个效果看看。

对应的提示词

选好效果，下方就是对应的提示词。

动效01

元素如何移动，如何回应你的操作。

滑入
淡入
视差

风格02

文字和元素怎样改变外观。

下划线延展
由虚到实
悬停缩放

材质03

用玻璃、颗粒和叠层，改变表面的质感。

颗粒纹理
光晕
层叠卡片

带下划线的示例可以点开体验，其他词条暂时供参考。

你的设备开启了减少动态效果，预览会保持静止。提示词也写了这项适配要求。

查看完整提示词悬浮抬升

复制这段文字，和你想改的组件一起发给 AI。

沿用我项目现有的技术栈，实现「悬浮抬升」效果。

保留我的内容、字体、颜色与布局。把效果应用于现有卡片，不复刻 Tomoyo 的示例插画，也不引入组件库。

为卡片添加轻微的悬浮抬升。鼠标悬停或可见的键盘焦点出现时，向上平移 6px，不改变页面布局。transform 与 box-shadow 使用 cubic-bezier(0.16, 1, 0.3, 1)，过渡时长 240ms。静置阴影为 0 20px 32px rgba(4, 25, 72, 0.32)，抬升阴影为 0 28px 44px rgba(4, 25, 72, 0.38)。鼠标移开或失焦后平滑归位。提供轻点或重播操作，在 960ms 内演示一次静置、抬升、停留和归位。保持点击区域不动，只移动内部视觉表面，避免悬停边界反复触发。

从当前画面平滑接续动画，快速切换时取消旧动画并保留当前视觉状态。动画播放中重复点击重播不应让画面跳回起点。

尊重 prefers-reduced-motion：跳过位移和渐变，立即显示内容，保留清晰的焦点标记。玻璃可保留静态材质。支持键盘和触屏，动画仅影响当前组件。

实现后说明哪些参数可以调整，以及如何验证行为。

把这个效果用到你的项目里。

每个示例都有对应的提示词，写好了效果怎么动、用多长时间。复制后交给你常用的 AI，就可以开始修改。

01
先试试看
选一个效果，把鼠标移到卡片上，或用键盘、触屏操作。没看清可以点重播。
02
复制提示词
里面写了时长、交互方式和无障碍要求。复制前也可以展开全文看一遍。
03
发给你常用的 AI
把提示词和要修改的组件一起发过去。提示词会要求 AI 保留你的内容和设计，再加上这个效果。

试试效果，再复制提示词。

动效01

风格02

材质03

把这个效果用到你的项目里。

先试试看

复制提示词

发给你常用的 AI